jQuery | Autocomplete Selection Event

In the web world, it is a very common practice to use autocomplete typeahead input. For example user address field. For this, a very common UI feature is available in jQuery.
In the process of searching a specific value, the jQuery UI autocomplete selection feature provides the user with some string suggestions for the input area which effectively saves time.
The autocomplete select action is triggered when the user selects one of the options from the pre-populated list.
The very common universal example is google suggestion box used by millions of users all around. The very basic purpose of this feature is to replace the value of the text field with the selected value from the list by the user. It triggers multiple events like on focus, key-up event or on change of user entry which are used to call different functions returning objects describing the focused or selected item.
The implementation is done using various ways like fetching data from the database table for populating values for the user entry field. It selects the strings from the related database which starts with user-entered keywords. Unlike dynamic implementation, you can do the static implementation. For example using an XML file or list is taken from an array of variables.

select( event, ui ) This function triggered whenever any option from the pop-up list is selected. It contains two parameters which are listed below:

  • event: This parameter mentions the event triggered by the user.
  • ui: This parameter mentions the object which contains the name and value properties of the selected items.

Code snippet:

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

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!doctype html>
<html>
  
<head>
    <title>
        jQuery Autocomplete Selection Event
    </title>
      
    <link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  
    <script src="//code.jquery.com/jquery-1.12.4.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js">
    </script>
</head>
  
<body>
    <label>Select Technology : </label>
      
    <input id="autocompleteInput">
  
    <script
        var tags = [ 
            "jQuery", "java", "php",
            "MySQL", "javascript", 
            "html", "C#", "C", "MongoDB" 
        ];
          
        $("#autocompleteInput").autocomplete({
            source: tags
        });
    </script>
</body>
  
</html>

chevron_right


Output:



Note: In the above example, source code actually defines the data to be used for selection.

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
  
<head>
    <title>
        jQuery AutoComplete selection
    </title
  
    <link rel="stylesheet" href=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script>
        $(document).ready(function() {
           
             var tags = [
                 "Washington", "Cincinnati",
                 "Dubai", "Dublin", "Colombo",
                 "Culcutta"
            ];
                 
            $('#input').autocomplete({
                source : tags,              
                select : showResult,
                focus : showResult,
                change :showResult
            })
                   
            function showResult(event, ui) {
                $('#cityName').text(ui.item.label)
            }
        });
    </script>
</head>
  
<body>
    <form>     
        <div class="ui-widget">
            <label for="input">City Name : </label>
            <input id="input"/><br>
              
            Label of City Name: <div id="cityName"></div>            
        </div>
    </form>
</body>
  
</html>

chevron_right


Output:

Note: From the above two code examples, you can observe that source parameter takes up list of string options such as array or result from a function callback.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.