Auto-completion is one of the most common mechanisms that is frequently used in modern websites to provide the user with a list of suggestions for the beginning of the word, which the user has typed in a text box or any other element that is capable of receiving an input. The user can then select an item from the list, which will be displayed in the input field. This feature prevents the user from having to enter an entire word or a set of words.This feature saves the time of the user as the user does not really need to type the entire word and it also provides a pleasant experience in front of the user as they are simply typing a single character and the whole word is coming in front of them.
As we all know that JQueryUI is a powerful front-end framework currently, It also provides an autocomplete widget —a control that acts a lot like a <select> dropdown but filters the choices to present only those that match what the user is typing into a control. jQueryUI provides the autocomplete() method to create a list of suggestions below the input field and adds new CSS classes to the elements concerned to give them the appropriate style.
Any field that can receive input can be converted into an Autocomplete, namely, <input> elements, <textarea> elements, and elements with the content editable attribute. This autocomplete widget comes with a number of attributes namely, we can autofocus on the matched records, we can define the minimum characters to be specified before the matched record is presented and we can also define a label for a particular value and you can also define an external source from where the data will be matched etc.
Let us start with a small code snippet having the default functionality:
<!Doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Autocomplete Default functionality</title>
<!--defining the script files and the css files -->
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery- ui.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
//short form of document.ready() function
$(function() {
var availableCars = [
"Verna",
"Civic",
"City",
"Fortuner",
];
$( "#automplete-1" ).autocomplete({
//here we are defining the source of records
source: availableCars
});
});
</script>
</head>
<body>
<div class = "ui-widget">
<p>Type "V" or "C" or "F"</p>
<label for = "automplete-1">Tags: </label>
<!--defining the input field-->
<input id = "automplete-1" type="text">
</div>
</body>
</html>
Output:
Using Autofocus Attribute:
<!Doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Autocomplete functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
var availableTutorials = [
"ASP.NET",
"JAVA",
"Boostrap",
"C",
"C++",
];
$( "#automplete-2" ).autocomplete({
source: availableTutorials,
autoFocus:true
});
});
</script>
</head>
<body>
<!-- HTML -->
<div class = "ui-widget">
<p>Type "J" or "s" or"c" or "a"</p>
<label for = "automplete-2">Tags: </label>
<input id = "automplete-2" type="text">
</div>
</body>
</html>
Output:
Let us start with a small code snippet having the default functionality:
<!Doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Autocomplete Default functionality</title>
<!--defining the script files and the css files -->
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery- ui.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
//short form of document.ready() function
$(function() {
var availableCars = [
"Verna",
"Civic",
"City",
"Fortuner",
];
$( "#automplete-1" ).autocomplete({
//here we are defining the source of records
source: availableCars
});
});
</script>
</head>
<body>
<div class = "ui-widget">
<p>Type "V" or "C" or "F"</p>
<label for = "automplete-1">Tags: </label>
<!--defining the input field-->
<input id = "automplete-1" type="text">
</div>
</body>
</html>
Output:
<!Doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Autocomplete functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
var availableTutorials = [
"ASP.NET",
"JAVA",
"Boostrap",
"C",
"C++",
];
$( "#automplete-2" ).autocomplete({
source: availableTutorials,
autoFocus:true
});
});
</script>
</head>
<body>
<!-- HTML -->
<div class = "ui-widget">
<p>Type "J" or "s" or"c" or "a"</p>
<label for = "automplete-2">Tags: </label>
<input id = "automplete-2" type="text">
</div>
</body>
</html>
Output:
 |
| See the Content is autofocussed that is matching the search |
That's it in this article of mine, try and uncover the rest of the attribute that can be implemented with the autocomplete() method of JqueryUI and I am sure you guys will really find it very useful to get it implemented on your own website. Some other attributes are minLength, delay etc.
This really helped me, thanks :)
ReplyDelete