部分搜索 JSON

Question

如何部分搜索 JSON 以匹配 JSON 值？

过滤器匹配城市名称的完整值并且搜索区分大小写

示例：如果我在文本框中键入 p，它应该将所有城市值与 p 匹配为数组

输出应该是


[{"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":""}]

这是我试过的

(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">

Answer 1

我必须添加 jQuery UI 才能获得自动完成功能

您遇到了一些问题

return item.CM_CITY_NAME.indexOf(request.term) !=-1

如果您不想区分大小写，请更改

return item.CM_CITY_NAME.toLowerCase().indexOf(request.term.toLowerCase()) !=-1

以上将 return 在城市中找到的任何字符串。

如果您希望输入的字词从头开始匹配城市名称，您需要

return item.CM_CITY_NAME.toLowerCase().indexOf(request.term.toLowerCase()) ===0

如果不需要IE11兼容，可以把上面改成

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, // 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">

Answer 2

您可以使用startsWith()方法判断一个字符串是否以指定字符串的字符开头。

cityjson.filter(function(item){ return item.CM_CITY_NAME.toLowerCase().startsWith(request.term.toLowerCase())})

部分搜索 JSON

partial search JSON

jquery

json

search

jquery-ui-autocomplete