How to detect when user ignores jquery autocomplete suggestions

Question

We need the ability to call a handler if a user enters text without choosing from a set of autocomplete suggestions.

In our case it doesn't matter if the entered text matches any autocomplete values or not - we only care if the user clicks/selects an autocomplete value, or not.

The way our form works is that a user starts entering a contact's last-name and gets presented with autocomplete suggestions including the contact's full-name and company. If the user selects one of the autocomplete suggestions, we populate multiple fields. That's all working fine.

The new requirement is that if the user does NOT select one of the suggestions, we need to blank out multiple fields - which we'd like to implement using a handler called from an autocomplete library.

Looking at previous answers, it doesn't look like we can do this with Jörn Zaefferer's autocomplete plugin, but if you have a patch or some idea how to implement the function, this is the library we'd try and push it into.

Answer 1

I have come across very interesting answer. It deals with how jQuery plugins manages their status. As I was looking at firebug(with firequery) I found that when I clicked icon showing jQuery properties of a DOM Node(in HTML tab) it showed all the plugin data attached to a DOM Node and attached to that was entire autocomplete parameters. Thus I found the solution.

$('#test').autocomplete({
    change:function( event, ui ) {
        var data=$.data(this);//Get plugin data for 'this'
        if(data.autocomplete.selectedItem==undefined)
            alert("manual");
        else
            alert("selected");      
    }
});

What autocomplete does is that if we select from list then selectedItem contains the JSON object we just selected with all its properties. But if we press ESC or Cancel the autofill it is set to null.

Answer 2

jquery autocomplete have some useful functions which you can use to resolve issue. if use ignores autocomplete sugestion then u can use below code to selected values from sugestion.

suppose your autofill input name is "txtName" then you can write code as:

$('#txtName').change(function(me) { $('#txtName').search(); });