Skip to content
Related Articles

Related Articles

jQuery UI Autocomplete delay Option

View Discussion
Improve Article
Save Article
  • Last Updated : 08 Jan, 2021
View Discussion
Improve Article
Save Article

jQuery UI Autocomplete delay option is used to set the time after which the suggestion will be showed to the user. Default value is 300.

Syntax:

$( ".selector" ).autocomplete({delay: 300})

Approach: First, add jQuery Mobile scripts needed for your project.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js”></script>
<link href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css” rel=”stylesheet” type=”text/css” />

Example 1:

HTML




<!DOCTYPE html> 
<html
  
<head
    <meta charset="utf-8"
    <meta name="viewport" content
        "width=device-width, initial-scale=1"
  
    <script src
    </script
  
    <script src
    </script
  
    <link href
        rel="stylesheet" type="text/css" /> 
          
    <style
        .height { 
            height: 10px; 
        
    </style
  
    <script>
         $(function() {
            var list  =  [
               "One",
               "two",
               "Three",
               "Four",
            ];
            $( "#gfg" ).autocomplete({
               source: list,
               delay:300
            });
         });
      </script>
   </head>
     
   <body>
      <div class = "ui-widget"
        <p>jQuery UI| delay Element</p>
        <p>GeeksforGeeks</p>
        <label for = "gfg">Tags: </label>
        <input id = "gfg">
      </div>
   </body>
</html>


Output:

Example 2:

HTML




<!DOCTYPE html> 
<html
  
<head
    <meta charset="utf-8"
    <meta name="viewport" content
        "width=device-width, initial-scale=1"
  
    <script src
    </script
  
    <script src
    </script
  
    <link href
        rel="stylesheet" type="text/css" /> 
          
    <style
        .height { 
            height: 10px; 
        
    </style
  
    <script>
         $(function() {
            var list  =  [
               "One",
               "two",
               "Three",
               "Four",
            ];
            $( "#gfg" ).autocomplete({
               source: list,
               delay:700
            });
         });
      </script>
   </head>
     
   <body>
      <div class = "ui-widget">
        <p>jQuery UI| delay Element</p>
        <p>GeeksforGeeks</p>
        <label for = "gfg">Tags: </label>
        <input id = "gfg">
      </div>
   </body>
</html>


Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!