jQuery UI Autocomplete search Event

Last Updated : 22 Dec, 2021

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>