Initiating Devbridge Autocomplete plugin search in code

Question

I'm currently using the Devbridge autocomplete plugin on a form. The plugin is working well, everything looks good, I'm happy, the code is happy, everyone is happy.

And then unit tests came along. I'm using QUnit in my application for testing.

I'm trying to test that certain search queries will generate a certain number of search suggestions.

First, I set the value in the search box:

searchBox.attr('value', 'new h');

Then, (this is what I don't know how to do) it should kickoff the autocomplete plugin... and then, using QUnit, prove that there are some suggestions being shown on the page.

ok(searchBox.find('.autocomplete-suggestion').length > 1,
                'Search suggestions returned for two character search' );

The above line of code would work if the search was actually taking place after the value was set -- it is not. I have tried (failed) a variety of methods to kickoff the search including:

searchbox.focus()

Or...

var e = jQuery.Event("keypress");
e.keyCode = e.which = 39;
searchBox.trigger(e);

Or...

searchBox.autocomplete().__proto__.getSuggestions('new h')

Is there a way to do this, or am I approaching it all wrong to begin with?

Answer 1

First of all it is better to set input value instead of attribute:

searchBox.val('new h');

Then call onValueChange, to trigger data lookup:

searchBox.autocomplete().onValueChange();

Then wait for suggestions if it is AJAX, and choose first suggestion item:

searchBox.autocomplete().select(0);

Check how it's done in autocomplete tests: https://github.com/devbridge/jQuery-Autocomplete/blob/master/spec/autocompleteBehavior.js