Skippr Skippr - 3 months ago 20
jQuery Question

Jquery Autocomplete (devbridge) and Searchable input

I'm currently using these two plugins together:

My problem is that when I select an option from the autocomplete dropdown (via mouseclick), it fills the textarea but does not trigger the jquery-searchable filter action.

However, if I select an option from the autocomplete dropdown with the keyboard (using the down arrow key), jquery-searchable works.

One thing to note is that the mouseclick method "works" if I do any sort of keypress in the text box after selecting an option, whether that be entering a space, or simply moving the cursor with the left/right arrow keys. Upon any of these actions taking place, jquery-searchable kicks in and the searchable items are filtered as usual.

I'm guessing there must be a difference between the way a click and keyboard-select write the data to the input field.

On the other hand, if I could simulate a keypress inside the input after I select an option. I don't want to have to rely on hackish keypress simulations if possible, but for question's sake, here's what I did try (doesn't work):

lookup: dpts,
minLength: 0,
onSelect: function (suggestion) {

So basically,

1.) Is there a way to make jquery-autocomplete option select via mouseclick operate the same way option selection works via keyboard?

2.) If not, is there a way to ensure some simulated keyboard activity occurs within the input element after I select it, to trigger jquery-searchable?

Here is the live example:

Try typing in "Center" into the search field, then mouse-click the first option. The field will auto-fill but
won't filter the list.

Clear the field, and search "Center" again, but this type use your keyboard down-arrow key. Each selection (as you move down the list with the arrow key) updates the


Keep the jQuery but change keypress to change or keyup. According to the source starting at line 61 (specifically 64), the bind events for the search are keyup and change. I'd also add a .focus() before .trigger() to be sure that the input is selected/focused.