With the help of the autocomplete() method, we can suggest some other terms to the user related to their queries.
<!DOCTYPE html>
<html>
<head>
<title>Jquery UI Accordion</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
</head>
<body>
<h1 align="center">Jquery UI autocomplete() Method</h1><hr>
<input type="search" id="select">
<script>
$(document).ready(function(){
$("#select").autocomplete();
});
</script>
</body>
</html>Option of autocomplete()
| Property | Value | Example |
|---|---|---|
| Source | array_name | View |
source option
We give the name of the array as value of source option. The array contains keywords that will appear if they are relevant to use query.
For example, if I type even ht (not complete Html) then it will present results from the rel_keywords array that are relevant to it. See example-
<!DOCTYPE html>
<html>
<head>
<title>Jquery UI Accordion</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
</head>
<body>
<h1 align="center">Jquery UI autocomplete() Method</h1><hr>
<input type="search" id="select">
<script>
$(document).ready(function(){
var rel_keywords=["html", "html language", "is html a programming language", "html tags", "html attribute", "css","javascript"];
$("#select").autocomplete({
source:rel_keywords,
});
});
</script>
</body>
</html>
Publish A Comment