w3resource

jQuery UI: Create a pre-populated list of values and focus on the first item when the menu is shown

jQuery UI Fundamental - I : Exercise-9

Create a pre-populated list of values and focus on the first item when the menu is shown.

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 focus on the first item when the menu is shown.</title>
</head>
<body>
<label for="autocomplete">Select a Tutorial</label>
<input id="autocomplete">
</body>
</html>

JavaScript Code :

$( "#autocomplete" ).autocomplete({
  source: [ "HTML", "CSS", "JavaScript", "PHP", "Python", "SQL", "MySQL"]
});


var autoFocus = $( "#autocomplete" ).autocomplete( "option", "autoFocus" );
 
$( "#autocomplete" ).autocomplete( "option", "autoFocus", true );

Go to:


PREV : Convert three headers and content panels into an accordion. Initialize the accordion and specify the icon (+, - etc.) option.
NEXT : Create a pre-populated list of values and delay in milliseconds between a keystroke occurs and a search is performed.

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


Contribute your code and comments through Disqus.

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.