Autocomplete widget - autocompleteselect event not properly indicate the textbox value

Autocomplete widget - autocompleteselect event not properly indicate the textbox value


I am using autocompleteselect and found that getting the textbox value in the event is not persist.

This is my test code:

  1.             input.bind("change", function() {
  2.             $("p#test").html($("p#test").html() + "change(" + input.val() + "), ");
  3.             });
  4.             input.bind("autocompleteselect", function(event, ui) {
  5.             $("p#test").html($("p#test").html() + "autocompleteselect(" + input.val() + "), ");
  6.             });
  7.             input.bind("autocompletechange", function(event, ui) {
  8.             $("p#test").html($("p#test").html() + "autocompletechange(" + input.val() + "), ");
  9.             });
  10.             input.bind("autocompletesearch", function(event, ui) {
  11.             $("p#test").html($("p#test").html() + "autocompletesearch(" + input.val() + "), ");
  12.             });
  13.             input.bind("autocompleteopen", function(event, ui) {
  14.             $("p#test").html($("p#test").html() + "autocompleteopen(" + input.val() + "), ");
  15.             });
  16.             input.bind("autocompletefocus", function(event, ui) {
  17.             $("p#test").html($("p#test").html() + "autocompletefocus(" + input.val() + "), ");
  18.             });
  19.             input.bind("autocompleteclose", function(event, ui) {
  20.             $("p#test").html($("p#test").html() + "autocompleteclose(" + input.val() + "), ");
  21.             });

From my thought, user may use the autocomplete in three different way:

  1. Using keyboard - Focus on textbox, type search keyword, press Down Arrow, and press Enter to select the item.
  2. Using keyboard and mouse - Focus on textbox, type search keyword, press Down Arrow, and click on the item.
  3. Using mouse - Click an object that trigger opening the autocomplete, click on the item.

The third one, autocomplete menu opened by input.autocomplete("search", "") code might performed by  clicking an other object like combobox down arrow image button.

Here is the result shown in P tag based on the both three condition:

  1. autocompletesearch(a),autocompleteopen(a),autocompletefocus(a),autocompleteselect(asd),autocompleteclose(asd),change(asd),autocompletechange(asd),
  2. autocompletesearch(a),autocompleteopen(a),autocompletefocus(a),change(a),autocompleteselect(a),autocompleteclose(asd),autocompletechange(asd),
  3. autocompletesearch(),autocompleteopen(),autocompletefocus(),autocompleteselect(),autocompleteclose(asd),autocompletechange(asd),

Here is the result for (1) and (2) when no keyword entered:
(the (3) not applicable for keyword since it trigger from another object that mainly to show all items)

  1. autocompletesearch(),autocompleteopen(),autocompletefocus(),autocompleteselect(asd),autocompleteclose(asd),autocompletechange(asd),
  2. autocompletesearch(),autocompleteopen(),autocompletefocus(),autocompleteselect(),autocompleteclose(asd),autocompletechange(asd),

From the result we can see that:

  1. autocompleteselect compared to autocompleteclose event in (2) and (3) does not give correct textbox value.
  2. Only textbox change event happened in (1).
  3. autocompletechange event only happen when textbox lost focus.
  4. seems that only autocompleteclose is a useful event for user to get textbox value whenever the value selected or changed, autocompletechange is too late to trigger after lost focus.

The we can get the correct selected value in autocompleteselect event by parameter ui.item.label or ui.item.value but it not properly documented and I only get it by using Firebug.

Actually we need an event that can be used to indicate an item selected with selected value by keyboard and mouse and changed textbox value without waiting for lost focus in case user can only type a keyword without selecting in autocomplete items. This events useful to update another object or perform an ajax request.

I can conclude that there is a glitch in autocompleteselect event that developer think it a suitable trigger to get selected value and the event documentation not clearly tell which event is suitable for it and confusion to use the events.

    • Topic Participants

    • mp