jQuery autocomplete manual input

Question

here is the scenario 1: user starts to type some word, autocomplete engine shows the suggests list (after ajax request). User clicks on some item from that list. The select event has been fired. Everything is fine.

Scenario 2: user starts to type some word, autocomplete engine shows the suggests list (after ajax request). But this time user does no click on item and goes to another field. The select event has not been fired. But the value user entered is correct. How can I trigger select event manually? Thank you.

Jake Feasel · Accepted Answer · 2011-12-22T07:00:58.147

2

$(document).on('blur', "#inputField", function () {

  $(this).trigger('autocompleteselect');

});

From Karthik's suggestion, an explanation: bind a handler for the input box's blur event, so that when the user leaves the field, it runs. This function then calls triggers the 'autocompleteselect' event that should (in theory) be also bound to this input box. Since nKognito says this isn't working... well, I guess I need to see some more code before I can troubleshoot further.

edit

Okay, based on your jsfiddle, I've tried, but failed to get the trigger for autocompleteselect to work. So now, I suggest this instead:

var list = [{id:1,Name:"John"},{id:2,Name:"Johna"}];
$('#a').autocomplete({
            source: function(request, response) {
                response($.map(list, function(item) {
                            return {id : item.id, label : item.Name};
                        }));
            },
            minLength: 2,
            select: function () { selectHanlder(this) }
        }).blur(function () { selectHandler(this) });


 function selectHandler(this) {
                // do what you will
            }

This will simply call the same handler as the autocompleteselect, on the blur event. Should be the same in effect.

edited Dec 22 '11 at 07:00

answered Dec 22 '11 at 05:04

Jake Feasel

16,785
5
53
66

@ Jake:Try to give explanation for your answer.So that everyone can understand what you are trying to say. – karthik Dec 22 '11 at 05:16
I have found that question (see answer #2): http://stackoverflow.com/questions/7633727/is-it-possible-to-trigger-the-jqueryui-autocomplete-select-event-manually, but the problem that after triggering click event the autocomplete's select event doesn't fire. – nKognito Dec 22 '11 at 05:58
Is it possible for you to show a functioning demo of this problem? Perhaps a fiddle, or a live link? – Jake Feasel Dec 22 '11 at 06:06
http://jsfiddle.net/VxZyB/ As you can see, when users selects some item from menu, the select event is triggered. But when user types the valid name and the field lose the focus, autocompleteselect event doesn't fire. – nKognito Dec 22 '11 at 06:16
Still it doesn't work. Blur handlier have another signature, so you can't call the same callback function as in select event – nKognito Dec 22 '11 at 06:50
Okay, I've made one final attempt. Hopefully this would work for you. Good luck. – Jake Feasel Dec 22 '11 at 07:01
I think it wont work too. Because the select handler have event and ui arguments, so when the user click on menu item, the engine somehow passes that values to eventhandler. But when the blur event triggered, you can't know which values should be passed to the same handler. ANd I can't find the way of how to retrieve the item's data (which is generated in source event of autocomplete). Thanks anyway – nKognito Dec 22 '11 at 07:13
@nKognito just have the .Blur go to a different function, that grabs the data directly out of your textbox. – Patches Dec 22 '11 at 07:25
That's the problem, that it grabs only the input data, but I need all data associated with menu's item (in source method) – nKognito Dec 22 '11 at 07:27
I don't understand - what data do you need that couldn't be fetched with the necessary selector? – Jake Feasel Dec 22 '11 at 07:29
As you see in http://jsfiddle.net/VxZyB/ - autocomplete's source is generated programmatically, so may be a lot of additional fields, except of label and id. How can I retrieve these values from autocomplete? Especcially in blur event? – nKognito Dec 22 '11 at 07:51

jQuery autocomplete manual input

1 Answers1

Linked