w3resource

jQuery UI: Create a pre-populated list of values and fixed minimum number of characters in two, a user must type before a search is performed

jQuery UI Fundamental - I : Exercise-12

Create a pre-populated list of values and fixed minimum number of characters in two, a user must type before a search is performed.

Sample solution :

HTML Code :

<!DOCTYPE html>
<html>
<head>
<link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-git.js"></script>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Create a pre-populated list of values and fixed minimum number of characters in two a user must type before a search is performed.</title>
<style type="text/css">
    button {
    display: block;
    margin: 20px 0 0 0;
 }   
</head>      
<body>
<p>Type at least two characters to get the list:</p>
<label for="autocomplete">Select a code</label>
<input id="autocomplete"> 
</body>
</html>

JavaScript Code :

$( "#autocomplete" ).autocomplete({
  source: [ "ABCD", "ABEF", "ABEH", "ACDE", "ACEF", "ACHY", "ABRT"]
});

var minLength = $( "#autocomplete" ).autocomplete( "option", "minLength" );
 
$( "#autocomplete" ).autocomplete( "option", "minLength", 2 );

See the Pen jquery-ui-fundamental-exercise-12 by w3resource (@w3resource) on CodePen.


Contribute your code and comments through Disqus.

Previous: Create a pre-populated list of values and disables the autocomplete.
Next: Create a pre-populated list of values and initialize the autocomplete position right top and right bottom.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.