How can you tell if a suggestion was selected from JQuery UI Autocomplete
Asked Answered
K

3

8

I have a text box that is wired to JQuery UI Autocomplete. As the user types in the box my search runs via an ajax call and returns suggestions. It seems that three things can happen:

  1. The autocomplete suggests options and the user selects one of them
  2. The autocomplete suggests options but the user chooses to select none of them
  3. The autocomplete can not make a suggestion - no match (so the list of suggestions do not display)

Dealing with all of the scenarios above, how can I tell if the user selects an option from the autocomplete?

I have looked into marking a flag when a search commences (match=false) and a select occurs (match=true) but this doesn't seem a very neat way of doing things.

Kershaw answered 22/9, 2011 at 15:17 Comment(2)
Do you need to know when an option was not selected as well? That is, when a user enters a value that is not in the list of suggestions?Cutshall
Yes, Andrew, as my page needs to do something different when a value is entered that does not currently exist in the database.Kershaw
C
14

You can use the select event like @bfavaretto points out, but I think in this situation it's more convenient to use the change event:

$("#auto").autocomplete({
    source: ['hi', 'bye', 'foo', 'bar'],
    change: function(event, ui) {
        if (ui.item) {
            $("span").text(ui.item.value);
        } else {
            $("span").text("user picked new value");
        }
    }
});

Example: http://jsfiddle.net/andrewwhitaker/3FX2n/

change fires when the field is blurred, but unlike the native change event, you get information about whether or not the user clicked an event (ui.item is null if the user did not click a suggestion).

Cutshall answered 23/9, 2011 at 13:0 Comment(10)
This is a good answer if you are happy to wait for the field to blur before knowing if the item is new. Thanks for the input, Andrew.Kershaw
@Andrew tat was something I was looking for but instead of asking a separate question if you could let me know it could be excellent. wat if I want to get the different value the user had typed in which was not selected from the auto complete dropdown?How do I get that?Jereme
@Gotham'sReckoning: Try $(this).value()Cutshall
@AndrewWhitaker wudn't that give both the values together?? how can I differentiate?? between them?Jereme
@Gotham'sReckoning: If they pick a value, ui.item will not be null. If the code in the else block is reached, calling $(this).val() will just get the value in the input--you know they didn't select a value because if they had ui.item would not be null. Does this help? jsfiddle.net/0cL1e2arCutshall
this makes it better thanks for that but in my scenario user could add multiple values some from the autocomplete suggestion and some custom values how could I treat that separately?Jereme
@Gotham'sReckoning: That would be more involved-- you'd have to split the input and look at your source to see which ones were part of the source. Probably worth opening a new questionCutshall
@AndrewWhitaker would you take a look at this question??[link]#26921277Jereme
Note that the user could still manually type in the same value as one of the suggestions and this would still say "user picked new value". If you need to know whether or not the item is truly new, you'll need to manually check to see if it's in the list of suggestions (or query your data source directly).Quent
Note that the user could still manually type in the same value as one of the suggestions and this would still say "user picked new value". If you need to know whether or not the item is truly new, you'll need to manually check to see if it's in the list of suggestions (or query your data source directly).Quent
P
2

When a user selects an option, the 'select' event is fired. You can listen to it and set a flag.

(function() {
    var optionSelected = false;
    $( ".selector" ).autocomplete({
        select: function(event, ui) { optionSelected = true; }
    });
})();
Prosody answered 22/9, 2011 at 15:27 Comment(2)
Thanks, cellcortex. So this is basically the flag solution that I outlined in the question. It would seem the isn't a really neat way of doing what I want. Thank you for clarifying that.Kershaw
Actually this is a perfectly fine/common/elegant enough way to do things in JavaScript. The important thing to do is to wrap things in a closure.Prosody
D
1

jQueryUI provides a select event, you should define it in the autocomplete options (when you apply the autocomplete to your form input).

For example (from the docs):

$( ".selector" ).autocomplete({
   select: function(event, ui) { ... }
});

You can access the selected item via ui.item from inside the event handler.

Dramamine answered 22/9, 2011 at 15:24 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.