Creating Autocomplete Widget
Notes:
jQuery UI - Creating Autocomplete Widget:
a textbox with suggestions dropdown list
Auto complete widget:
simplifies the searching of an item in a pre populated list of values
It just filters out the list of values step by step based on the given search string from the pre populated list of values.
Creating Auto complete widget:
1. Create a new HTML document with basic HTML document structure code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Auto complete Demo</title>
</head>
<body>
</body>
</html>
2. Link the necessary jQueryUI libray files to the HTML document
<link href="jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>
<script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
3. Code the structure of the widget (i.e. HTML or markup):
To create an auto complete widget; we need to create a text input field
<input type="text" id="autocomplete"/>
4. Select the element using jQuery and call the respective jQuery UI function on it
Select the element using jQuery selector, call autocomplete jQuery UI function on it and pass an object with its source value set to an array of values.
<script type="text/javascript">
$("#autocomplete").autocomplete( { source: [ "AI" , "CG" , "DS" , "OS" ] } );
</script>
Interview Questions:
