Both part did same thing but there is little difference between them, The JavaScript part will gives the faster result than jQuery part, I wrote this post because i got many emails about first post, Most of the people request me to write same post in jQuery, because some of them don't know JavaScript they know only jQuery.
So If you have same problem like they all have so read this post carefully, and If you have any question regarding any post please contact us i will try to reply you all as soon as possible, For Now Let's add auto complete and suggestion feature in your website using jQuery.
So Let's Begin,
Using jQuery :
jQuery has an inbuilt autocomplete function which takes is and a list of available tags, jQuery method is little bit slower than JavaScript method, If you want faster code than I recommend you to read Add Auto Complete and Suggestion Feature Using JavaScript.
Note : First of all please don't forget to add jQuery library carefully. and All the library should be downloaded in your computer.
Code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Auto Complete and Suggestion Feature Using jQuery</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https//code.jquery.com/jquery-1.12.4.js"></script>
<script src="https//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
var tags = [
"Gwalior",
"Indore",
"Punjab",
"Haryana",
"Delhi",
"Madhya Pradesh",
"Rajasthan",
"Ujjain",
"Shivpuri",
"Bhind",
"Dholpur"
];
//options
$("#tags").autocomplete({
source:tags //list of available tags
});
});
</script>
<div class="ui-widget">
<h1>Hello World,</h1>
<h2>Enter any alphabets for Auto Complete and Suggestion...</h2>
<input id="tags">
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Auto Complete and Suggestion Feature Using jQuery</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https//code.jquery.com/jquery-1.12.4.js"></script>
<script src="https//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
var tags = [
"Gwalior",
"Indore",
"Punjab",
"Haryana",
"Delhi",
"Madhya Pradesh",
"Rajasthan",
"Ujjain",
"Shivpuri",
"Bhind",
"Dholpur"
];
//options
$("#tags").autocomplete({
source:tags //list of available tags
});
});
</script>
<div class="ui-widget">
<h1>Hello World,</h1>
<h2>Enter any alphabets for Auto Complete and Suggestion...</h2>
<input id="tags">
</div>
</body>
</html>
Output :
No comments:
Post a Comment