Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Enable an Autocomplete in jQuery UI ?
Jquery is a fast and simple Javascript library which is used to make client−side HTML. It simplifies some of the Javascript functions like, DOM Manipulation, traversal, Event Handling and AJAX calls. This also has Cross−Browser compatibility.
What is Autocomplete?
Autocomplete is a very essential feature of User Experience, As name suggests this autocompletes text in forms such as Name, Email, Address or the tags/suggestions which has been specified according to the context of the website.
jQuery UI allows us to enable the autocomplete with an autocomplete widget.
Approach 1: Using autocomplete() Function
autocomplete() function is a jQuery function which is used with input events such as Text Input or Search Bar. When the user types an alphabet this function suggests with some words passed to the function.
Here we will be using this autocomplete function to implement autocomplete functionality which will enhance the UI/UX of the web page. When the user will type a word this will automatically display some suggestions based on the words passed to this function through the nameSuggestions variable.
Algorithm
Step 1: Import all the required jQuery UI scripts inside <head>.
Step 2: Create a basic form using <form> tag and <input> in HTML. Add id to the parent element.
Step 3: Use the autocomplete() method. Add the suggestions/tags in an array.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<script>
$(function() {
var nameSuggestions = ['Java','Javascript',"Python",'C','C++','Web Development','Mobile Development'];
$("#input").autocomplete({
source: nameSuggestions
});
});
</script>
</head>
<body>
<form style="text-align: center;">
<h1>Tutorials Point Courses.</h1>
<input id="input" type="text">
</form>
</body>
</html>
In the above output, as the user types “M”, autocomplete suggests for tags available in the array.
Approach 2: Using enable() method
It is a jQuery method which is used to enable a form functionality which has been disabled or newly created. After the autocomplete widget has been created, the enable() function method is called on the input element and this enables the autocomplete functionality.
Additional parameters used in this method
minLength: This parameter accepts a number which defines the chars required to display suggestions, default is 1.
delay: Another parameter passed is delay which accepts Number and defines the ms after which suggestions will be displayed. Default is 300.
Here, we will be using the enable() method to enable the autocomplete() widget.
Algorithm
Step 1: Import required scripts of jQuery, Create a basic form with input placeholder and provide a suitable id.
Step 2: Use enable() method to enable the autocomplete, this method doesn’t accept any argument.
Example
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<script>
$(function() {
var nameSuggestions = ['Java','Javascript',"Python",'C','C++','Web Development','Mobile Development'];
$("#input").autocomplete({
source: nameSuggestions,
delay : 500,
minLength: 0
});
$("#input").autocomplete("enable")
});
</script>
</head>
<body>
<form style="text-align: center;">
<h1>Tutorials Point Courses.</h1>
<input id="input" type="text">
</form>
</body>
</html>
In the above output you can see, without typing a word all the available suggestions are being displayed. This is because of the minLength parameter passed in the autocomplete() method.
Here are some useful Options
AutoFocus:Receives a Boolean. When set to true, the first item of the suggestions/tags array will be focused.
Disabled:Receives a Boolean. This option disables the autocomplete function when set to True.
Here are some useful Methods:
close:This method closes the autocomplete menu. disable: This method disables the autocomplete menu.
enable:This method enables the autocomplete menu.
destroy:This method removes the autocomplete function completely and returns the element to its initial state.
widget:This element returns a jQuery element which contains the menu element, this menu is constantly created and destroyed.
Conclusion
Although these are basic autocomplete features, you can always achieve your desired functionality by customizing with CSS and Options and Methods of autocomplete() method.
172 Views
