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 would think the easy way to do this would be to store the array of text suggestions and compare it with what is actually entered in the text box. Do this onblur or onsubmit. Look in the array for the actual entry...if it doesn't exist then they entered their own text.

Answer 2

That plugin will trigger the result event when a user selects a result. Just initialize a variable to true on page load, then set it to false in the "result" even and check to see if it is true. Something like

(function() {
  var typed_in = true;
  $("#auto").bind("result", function() { typed_in = false });
  $("#form").blur(function() {
    if (typed_in) {
      // do stuff
    } else { 
      // do other stuff
    }
    typed_in = true;
  });
)();

Answer 3

Well, here's how I did it, in case it helps. I cleared the value of a hidden field whenever the autocomplete field was left without taking a suggestion.

I believe the search() function does the actual check that you want and if result() is called without a data element, then you know that auto-complete wasn't used.

autocompleteField.result(function(event, data, formatted) {
    if (data) {
        //auto-complete matched
        //NB: this might get called twice, but that's okay
    }
    else {
        //must have been triggered by search() below
        //there was no match
    }
});

autocompleteField.blur(function(){
    autocompleteField.search(); //trigger result() on blur, even if autocomplete wasn't used
});

Answer 4

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(); });