Open In App

jQuery UI Autocomplete minLength Option

Improve
Improve
Like Article
Like
Save
Share
Report

jQuery UI Autocomplete minLength option sets the minimum number of characters that should be entered in an input field. The default value is 0

Syntax:

$( ".selector" ).autocomplete({minLength: 1}),

Approach: First, add the 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,
               minLength: 1
            });
         });
      </script>
   </head>
    
   <body>
      <div class = "ui-widget">
        <p>jQuery UI| minLength 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,
               minLength: 2
            });
         });
      </script>
   </head>
    
   <body>
      <div class = "ui-widget">
        <p>jQuery UI| minLength Element</p>
        <p>GeeksforGeeks</p>
        <label for = "gfg">Tags: </label>
        <input id = "gfg">
      </div>
   </body>
</html>


Output:



Last Updated : 04 Apr, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads