Sometimes wee need to call an API or action to get matching list with the provide keyword in Search box, for this we usually implemente autocomplete feature to input field for searching purpose by doing AJAX call.
Example: In the below example I'm using autocomplete() function inside which I have made an AJAX call. On success I'm getting list from ajax response and passing that list to response() method that will then populate that list in autocomplete suggestions.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Search</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript">
$(function() {
$("#search-box").autocomplete({
width: 300,
max: 10,
delay: 100,
minLength: 1,
autoFocus: true,
cacheLength: 1,
scroll: true,
highlight: false,
source: function(request, response) {
$.ajax({
url : 'url', //Here we will user the URL that we want to hit
type : 'post',
async : true,
cache : false,
data : {
searchText : request.term
},
beforeSubmit : function() {
},
success : function(response) {
if (response.status == 'OK') {
var data = response.suggestedKeywords; //Here populate data with fetched list
response(data);
} else {
alert("failed try again...");
}
},
error : function() {
alert('System error occured, please try again ...');
}
});
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="search-box" >Search</label>
<input type="text" id="search-box">
</div>
</body>
</html>
Hope this will help you :)
0 Comment(s)