Skip to content
Related Articles

Related Articles

jQuery | Autocomplete Selection Event
  • Last Updated : 20 Dec, 2019

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:




<!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>

Output:



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

Example 2:




<!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>

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
Recommended Articles
Page :