w3resource logo


jquery UI exercises

jQuery UI: Create a pre-populated list of values and initialize the autocomplete position right top and right bottom


jQuery UI Fundamental - I : Exercise-13

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

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 initialize the autocomplete position right top and right bottom.</title>
<style type="text/css">
    button {
    display: block;
    margin: 20px 0 0 0;
}   
</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 position = $( "#autocomplete" ).autocomplete( "option", "position" );
 
$( "#autocomplete" ).autocomplete( "option", "position", { my : "right top", at: "right bottom" } );
Create a pre-populated list of values and initialize the autocomplete position right top and right bottom. 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:

PHP: Loop

JavaScript: Delete duplicates in an array

Oracle: Round the number