I have added jquery autocomplete in my website search box for the locations. I am able to achieve multiple autocomplete search suggestions in the box but it looks not user friendly as all the suggestions are displayed with the box. I want 1 or 2 suggestions and rest all will be under the tag button called: "1+ More". I have attached the desired output and what I have right now.
Javascript code used:
<script type="text/javascript">
$(function(){
$.getJSON("<?php echo base_url();?>package.json", function(data) {
autoComplete = [];
for (var i = 0, len = data.length; i < len; i++) {
autoComplete.push(data[i]);
}
$('#myAutocompleteMultiple').autocomplete({
source: autoComplete,
multiselect: true,
});
});
</script>
and html used:
<input id="myAutocompleteMultiple" type="text" placeholder="Search Location"/>
Json file content:
[
"Al Barari Commercial",
"Al Quoz Commercial",
"Al Qusais Commercial",
"Arjan Commercial",
"Bur Dubai Commercial"
]
Please anyone help me.
Thank you.