jQuery | Autocomplete Selection Event

03 Aug, 2021
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="http://code.jquery.com/ui/1.11.3/themes/ui-lightness/jquery-ui.css"/>          <script src=        "http://code.jquery.com/jquery-2.1.3.js">    </script>          <script src=        "http://code.jquery.com/ui/1.11.2/jquery-ui.js">    </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.
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
jQuery-Misc
Picked
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show and Hide div elements using Checkboxes ?
How to redirect to a particular section of a page using HTML or jQuery?
How to get the value in an input text box using jQuery ?
How to Dynamically Add/Remove Table Rows using jQuery ?
jQuery | children() with Examples
How to insert spaces/tabs in text using HTML/CSS?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Node.js fs.readFileSync() Method
How to set the default value for an HTML <select> element ?