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.

score 7 · Answer 1 · answered Sep 03 '11 at 19:38

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.

I found one more info. Actually you can use the argument 'ui' as it is same as selectedItem. So no need to go the long way but I kept above answer so that you can use other parameters also. — Jay Kapasi, Sep 03 '11 at 20:19
how on earth you guys finding these kind of trickts.. its simply superb. — Raghav, Feb 28 '12 at 06:56

score 2 · Answer 2 · answered Sep 24 '10 at 11:33

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

score 1 · Answer 3 · answered Oct 16 '09 at 07:43

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

this works well unless the user clicks results in the autocomplete, firing off the search too early — Luke Lowrey, Jan 14 '10 at 00:37
@npdoty, where to use the result method and how? firebug shows the method is not defined or bla bla bla. — Istiaque Ahmed, Sep 19 '12 at 05:03

score 0 · Answer 4 · answered Aug 12 '09 at 16:29

0

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.

answered Aug 12 '09 at 16:29

Andrew Siemer

10,166
3
41
61

Two problems with that: 1 trivial - the user's allowed to deliberately ignore auto-complete if the extra meta-info is wrong - i.e. entering "Siemer" may auto-complete with "Andrew Siemer (StackOverflow)" - which would populate three fields with "Siemer", "Andrew" and "StackOverflow" - but they've ignored that option cos they're entering info for Bob Siemer at Acme Corp. Secondly, event ordering's a nightmare. onsubmit is way too late, and onblur conflicts with the way autocomplete works (onblur triggers when the user picks autocomplete values using the mouse, leading to a race-condition.) – searlea Aug 12 '09 at 18:10

Paul Tarjan · Answer 5 · 2009-08-20T06:38:58.770

0

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

edited Aug 20 '09 at 06:38

answered Aug 19 '09 at 09:34

Paul Tarjan

48,968
59
172
213

I read that as suggesting using a global status variable? We'd need to use scoped/closured/expando variables to cater for multiple autocomplete fields. Bigger issue: we can't hook into `form.submit(fn)` as we're trying to help form-filling, not implement validation (i.e. we need to hook into `focus(fn)` or `blur(fn)` on individual fields as the user works their way through the form, not once they're finished) – searlea Aug 19 '09 at 12:30
ok, then use onblur with a closured variable. example changed – Paul Tarjan Aug 20 '09 at 06:37

How to detect when user ignores jquery autocomplete suggestions

5 Answers5

Linked