w3resource logo


jquery UI exercises

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 );
Create a pre-populated list of values and focus on the first item when the menu is shown. on jsbin.com

Improve this sample solution and post your code through Disqus.



Join our Question Answer community to learn and share your programming knowledge.

Help the community:

Python: Fizzbuzz

C++: Decimal to binary conversion

JavaScript: Need Help in JavaScript

Python: Help me with this program