jQuery UI Autocomplete search Event

jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML , CSS , and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Autocomplete widget is used to perform autocomplete enables to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.

The jQuery UI Autocomplete search event is used to trigger before a search operation is performed after minLength and delay options are met. If these options are canceled, then no request will be started and no items suggested.

Syntax:

Initialize the autocomplete with the search callback specified:

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

Bind an event listener to the autocompletesearch event:

$( ".selector" ).on(
    "autocompletesearch",
    function( event, ui ) {}
);

Parameters: It accepts a callback function that holds two parameters.

event: It accepts Event type value.
ui: It accepts Object type value. The ui object can be empty but used for consistency with other events.

CDN Link: First, add jQuery UI scripts needed for your project.

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

Example: This example describes the uses of jQuery UI Autocomplete search event.

HTML

<!DOCTYPE html> 

<html> 

<head> 

    <meta charset="utf-8"> 

    <meta name="viewport" content= 

        "width=device-width, initial-scale=1"> 

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

    <script> 

        $(function () { 

            var subjects = [ 

                "HTML", 

                "CSS", 

                "JavaScript", 

                "jQuery", 

                "PHP", 

                "React", 

                "Node.js" 

            ]; 

            $("#GFG").autocomplete({ 

                source: subjects, 

                search: function( event, ui ) { 

                    alert("Search Event Triggered"); 

                } 

            }); 

        }); 

    </script> 

</head> 

<body> 

    <center> 

        <div class="ui-widget"> 

            <h1 style="color: green;"> 

                GeeksforGeeks 

            </h1> 

            <h3>jQuery UI Autocomplete search Event</h3> 

            <label for="GFG"> 

                Select Subject: 

            </label> 

            <input id="GFG"> 

        </div> 

    </center> 

</body> 

</html>

Output:

Reference: https://api.jqueryui.com/autocomplete/#event-search

Article Tags :

JQuery

Web Technologies

jQuery-UI

jQuery-UI-Autocomplete