jQueryUI Autocomplete: Select and Focus Events

|
| By Webner

It is already discussed “What is AutoComplete feature of jQueryUI” in one of my previous blogs. Please refer to following link for description of jQueryUI Autocomplete:

https://blog.webnersolutions.com/how-to-add-font-awesome-progress-icon-in-textbox-for-autocomplete-jquery-ui-plugin

Here, in this blog, I will discuss most often used events of jQueryUI Autocomplete API.

Select and Focus

Select event means “perform some action when the option is selected from  list of suggestions”.
Focus event means “perform some action when the mouse has hovered on option from list of suggestions”. Here, we are not yet selecting option, just placing mouse over the option from list of suggestions.

Basic initialization to work with jQueryUI Autocomplete is:

$( "#empName" ).autocomplete({
source: function(request, response){
// Ajax call to get result
}
}); // Example 1
Or another simple initialization is:
$( "#langTitle" ).autocomplete({
source: [“c++”, “java”, “Asp.net”, “C#.net”, “php”]
}); // Example 2

From the above two examples, we can observe that source parameter basically shows the list of options/suggestions either by directly passing an array or by function callback to get results through ajax. In function callback method, data should be returned in json format to be accepted by source parameter of autocomplete API.

An array of objects, that is, an array of the label-value pair can also be provided to source of Autocomplete API in the following format:

[{‘label’: ‘label1’, ‘value’:’value1’}, {‘label’: ‘label2’, ‘value’:’value2’}, {‘label’: ‘label3’, ‘value’:’value3’}, ….]

Here, label is displayed when list of suggestions widget is displayed. When user hovers the mouse on or selects one of the options from suggestions showing, the value is shown in the textbox to which autocomplete is bound. For example, #empName and #langTitle are textboxes in example 1 and example 2 respectively.

Suppose, we have a file LanguageList.PHP, where we have fetched records from the database and have resulted in the array in format as shown below:

 array('label' => 'java programming', 'value' => 2 ),
array('label' => 'asp.net', 'value' => 3 ),
array('label' => 'C++ programming', 'value' => 4 ),
array('label' => 'Perl', 'value' => 5 ),
array('label' => ‘Pascal', 'value' => 6 )
);
echo json_encode($data);
?>

We can provide above array of objects to source of autocomplete as shown below:

<script>
$( "#langList" ).autocomplete({
source: function(request, response){
$('#loading_data_icon').html('<i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>');
$.ajax({
        url: LanguageList.php',
        dataType: "json",
        data: {
              'term' : request.term,
               },
               success: function(data) 
                {
               response(data);
               $('#loading_data_icon').html('');
                 }
      });
}
});
</script>

When I write “p” on ‘#langList’ textbox, then labels are shown to user as list of suggestions. List of suggestions is shown in the following screenshot:

1
Screenshot 1

Focus Event: Now, the default behavior of jQueryUI Autocomplete for focus event is to show value of hovered option from list of suggestion on textbox like shown below:

2
Screenshot 2

From above screenshot, we can see that as I place mouse over php, textbox shows value 1, similarly when I place mouse over java programming, textbox will show value 2.

Sometimes, we don’t want to show value like 1,2 etc. on mouse over or mouse hover on option in textbox, instead we want to display label in textbox during focus. It may be required to use value of focused option for our internal purpose.

So, we can handle focus event to show label as below:

$( "#langList" ).autocomplete({
source: function(request, response){
// code sample already mentioned
},
focus: function(event, ui) {
event.preventDefault();
$( "#langList" ).val(ui.item.label);
}
});

With above script, now label will be displayed on textbox on focus of option from suggested list.

3
Screenshot 3

In above screenshot, as I focus on option “php”, textbox shows label “php”, not its value 1.

Select Event: Default behavior of jQueryUI Autocomplete for select event is to show value of selected option from list of suggestions on textbox:

Now, we have handled focus event to show label on textbox, but on selecting the option, select event also, by default, shows value on textbox, means it will display “1” on textbox if I select option “php”. Here also, we need to show actual text in the textbox on select of option from suggested list. We can do this as follows:

$( "#langList" ).autocomplete({
source: function(request, response){
// code sample already mentioned
},
focus: function(event, ui) {
// same as above
},

select: function(event, ui){
event.preventDefault();
$( "#langList" ).val(ui.item.label);
$(‘#hiddenField’).val() = ui.item.value; //suppose we want to pass value to hidden input
},
});

In the above sample code, script is written to display text in textbox on select of option from suggested list. Value of option selected can be assigned to hidden field or we can use elsewhere in web page for using it for internal purpose.

Leave a Reply

Your email address will not be published. Required fields are marked *