jQuery UI Autocomplete delay Option
jQuery UI Autocomplete delay option is used to set the time after which the suggestion will be shown to the user. The 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" /> <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" /> <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:
Please Login to comment...