How to partial search the JSON to match the JSON value?
Filter is matching full value of the city name and search is case-sensitive
Example: if I type p in text box it should match all city value with p as array
output should be as
[{"CM_CITY_CODE":"515134", "CM_CITY_NAME":"Puttaparthi(AP)", "CM_HUB":"Thirupati", "CM_STATE":"Andhra Pradesh", "CM_DT_PICKUP_CITY":"0", "CM_DROP_CITY":"1", "CM_ADDEDBY":"", "CM_ADDED_DATE":"", "CM_EDITEDBY":"", "CM_EDITED_DATE":""},{"CM_CITY_CODE":"517408", "CM_CITY_NAME":"Palamaner", "CM_HUB":"Vellore", "CM_STATE":"Andhra Pradesh", "CM_DT_PICKUP_CITY":"0", "CM_DROP_CITY":"1", "CM_ADDEDBY":"", "CM_ADDED_DATE":"", "CM_EDITEDBY":"", "CM_EDITED_DATE":""}]
Here is what I tried
(function () {
var cityjson = [{"CM_CITY_CODE":"04262", "CM_CITY_NAME":"Gudalur", "CM_HUB":"Coimbatore", "CM_STATE":"", "CM_DT_PICKUP_CITY":"1", "CM_DROP_CITY":"1", "CM_ADDEDBY":"VigneshkumarP", "CM_ADDED_DATE":"2020-12-17 13:18:23", "CM_EDITEDBY":"", "CM_EDITED_DATE":""},
{"CM_CITY_CODE":"505001", "CM_CITY_NAME":"Hyderabad", "CM_HUB":"Hyderabad", "CM_STATE":"", "CM_DT_PICKUP_CITY":"0", "CM_DROP_CITY":"1", "CM_ADDEDBY":"", "CM_ADDED_DATE":"", "CM_EDITEDBY":"", "CM_EDITED_DATE":""},
{"CM_CITY_CODE":"506001", "CM_CITY_NAME":"Warangal", "CM_HUB":"Hyderabad", "CM_STATE":"Telangana", "CM_DT_PICKUP_CITY":"0", "CM_DROP_CITY":"1", "CM_ADDEDBY":"", "CM_ADDED_DATE":"", "CM_EDITEDBY":"", "CM_EDITED_DATE":""},
{"CM_CITY_CODE":"515134", "CM_CITY_NAME":"Puttaparthi(AP)", "CM_HUB":"Thirupati", "CM_STATE":"Andhra Pradesh", "CM_DT_PICKUP_CITY":"0", "CM_DROP_CITY":"1", "CM_ADDEDBY":"", "CM_ADDED_DATE":"", "CM_EDITEDBY":"", "CM_EDITED_DATE":""},
{"CM_CITY_CODE":"516001", "CM_CITY_NAME":"Kadappa", "CM_HUB":"Hyderabad", "CM_STATE":"Tamil Nadu", "CM_DT_PICKUP_CITY":"0", "CM_DROP_CITY":"1", "CM_ADDEDBY":"", "CM_ADDED_DATE":"", "CM_EDITEDBY":"Vivek", "CM_EDITED_DATE":"2020-11-03 10:23:26"},
{"CM_CITY_CODE":"517001", "CM_CITY_NAME":"Chitoor", "CM_HUB":"Vellore", "CM_STATE":"Andhra Pradesh", "CM_DT_PICKUP_CITY":"1", "CM_DROP_CITY":"1", "CM_ADDEDBY":"", "CM_ADDED_DATE":"", "CM_EDITEDBY":"", "CM_EDITED_DATE":""},
{"CM_CITY_CODE":"517325", "CM_CITY_NAME":"Madanapalli", "CM_HUB":"Thirupati", "CM_STATE":"Tamil Nadu", "CM_DT_PICKUP_CITY":"0", "CM_DROP_CITY":"0", "CM_ADDEDBY":"", "CM_ADDED_DATE":"", "CM_EDITEDBY":"", "CM_EDITED_DATE":""},
{"CM_CITY_CODE":"517408", "CM_CITY_NAME":"Palamaner", "CM_HUB":"Vellore", "CM_STATE":"Andhra Pradesh", "CM_DT_PICKUP_CITY":"0", "CM_DROP_CITY":"1", "CM_ADDEDBY":"", "CM_ADDED_DATE":"", "CM_EDITEDBY":"", "CM_EDITED_DATE":""}]
var getData = function (request, response) {
let x = cityjson.filter(function(item){
return item.CM_CITY_NAME == request.term;
})
if(x.length>0)
{
console.log(x)
response($.map(x, function (item) {
return {
label: x.CM_CITY_NAME,
data: item
};
}));
}
else{
alert('else')
}
};
//on select of from dropdown
var selectTo = function (event, ui) {
return false
}
//to address autocomplete
$("#selector").autocomplete({
source: getData,
select: selectTo,
minLength: 2
});
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="selector">I had to add jQuery UI to get the autocomplete
You had a few issues
return item.CM_CITY_NAME.indexOf(request.term) !=-1
If you want this case INsensitive, change
return item.CM_CITY_NAME.toLowerCase().indexOf(request.term.toLowerCase()) !=-1
The above will return any string found in the city.
If you want the typed term to match the cityname from the beginning you need
return item.CM_CITY_NAME.toLowerCase().indexOf(request.term.toLowerCase()) ===0
If you do not need IE11 compatibility, you can change the above to
return item.CM_CITY_NAME.toLowerCase().startsWith(request.term.toLowerCase())
Here is the other change you need
if (x.length > 0) {
const resp = $.map(x, function(item) {
return {
label: item.CM_CITY_NAME, // item., not x.
data: item
};
})
response(resp);
}
$(function() {
var cityjson = [{"CM_CITY_CODE":"04262","CM_CITY_NAME":"Gudalur","CM_HUB":"Coimbatore","CM_STATE":"","CM_DT_PICKUP_CITY":"1","CM_DROP_CITY":"1","CM_ADDEDBY":"VigneshkumarP","CM_ADDED_DATE":"2020-12-1713:18:23","CM_EDITEDBY":"","CM_EDITED_DATE":""},{"CM_CITY_CODE":"505001","CM_CITY_NAME":"Hyderabad","CM_HUB":"Hyderabad","CM_STATE":"","CM_DT_PICKUP_CITY":"0","CM_DROP_CITY":"1","CM_ADDEDBY":"","CM_ADDED_DATE":"","CM_EDITEDBY":"","CM_EDITED_DATE":""},{"CM_CITY_CODE":"506001","CM_CITY_NAME":"Warangal","CM_HUB":"Hyderabad","CM_STATE":"Telangana","CM_DT_PICKUP_CITY":"0","CM_DROP_CITY":"1","CM_ADDEDBY":"","CM_ADDED_DATE":"","CM_EDITEDBY":"","CM_EDITED_DATE":""},{"CM_CITY_CODE":"515134","CM_CITY_NAME":"Puttaparthi(AP)","CM_HUB":"Thirupati","CM_STATE":"AndhraPradesh","CM_DT_PICKUP_CITY":"0","CM_DROP_CITY":"1","CM_ADDEDBY":"","CM_ADDED_DATE":"","CM_EDITEDBY":"","CM_EDITED_DATE":""},{"CM_CITY_CODE":"516001","CM_CITY_NAME":"Kadappa","CM_HUB":"Hyderabad","CM_STATE":"TamilNadu","CM_DT_PICKUP_CITY":"0","CM_DROP_CITY":"1","CM_ADDEDBY":"","CM_ADDED_DATE":"","CM_EDITEDBY":"Vivek","CM_EDITED_DATE":"2020-11-0310:23:26"},{"CM_CITY_CODE":"517001","CM_CITY_NAME":"Chitoor","CM_HUB":"Vellore","CM_STATE":"AndhraPradesh","CM_DT_PICKUP_CITY":"1","CM_DROP_CITY":"1","CM_ADDEDBY":"","CM_ADDED_DATE":"","CM_EDITEDBY":"","CM_EDITED_DATE":""},{"CM_CITY_CODE":"517325","CM_CITY_NAME":"Madanapalli","CM_HUB":"Thirupati","CM_STATE":"TamilNadu","CM_DT_PICKUP_CITY":"0","CM_DROP_CITY":"0","CM_ADDEDBY":"","CM_ADDED_DATE":"","CM_EDITEDBY":"","CM_EDITED_DATE":""},{"CM_CITY_CODE":"517408","CM_CITY_NAME":"Palamaner","CM_HUB":"Vellore","CM_STATE":"AndhraPradesh","CM_DT_PICKUP_CITY":"0","CM_DROP_CITY":"1","CM_ADDEDBY":"","CM_ADDED_DATE":"","CM_EDITEDBY":"","CM_EDITED_DATE":""}];
var getData = function(request, response) {
console.log("term",request.term)
let x = cityjson.filter(function(item) {
return item.CM_CITY_NAME.toLowerCase().startsWith(request.term.toLowerCase())
})
if (x.length > 0) {
const resp = $.map(x, function(item) {
return {
label: item.CM_CITY_NAME,
data: item
};
})
console.log(resp)
response(resp);
} else {
console.log('else')
}
};
//on select of from dropdown
var selectTo = function(event, ui) {
return false
}
//to address autocomplete
$("#selector").autocomplete({
source: getData,
select: selectTo,
minLength: 2
});
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" />
<input type="text" id="selector">