Sometimes we need do functionality when we select any item from the suggestions that display by autocomplte feature.
Example: In the below example I'm using autocomplete() function to get suggestions with the provided keyword. As below by implementing "select" event of autocomplete we can write our code to do functionality according to selected item.
<!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 ...');
}
});
},
select: function(event, ui) {
var data = ui.item.data;
//Pur you code here to manipulate with selected value
}
});
});
</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)