Jquery UI autocomplete() Method

Date Published: 04/05/2020Published By: JaiSchool

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()

PropertyValueExample
Sourcearray_nameView

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

Leave a Reply

Your email address will not be published.