JSON 在部分命中时显示结果

Question

我有一段代码与 JSON 一起从文件中读取值，当我有一个完全匹配时，我让它显示我需要的结果，以及一种始终显示所有数据的方式，两者都不是我需要的。我从 CSV 文件开始编写代码，但由于数据量太慢，因此切换到 JSON（参见：This question）

我现在使用 JSON 的代码如下：

$(document).ready(function() {
    var airports; //Prepare variable for storing JSON data

    d3.json("airport.json", function(data) {
      airports = data; //put the JSON data into an easy to call variable
      continueCode(); //This is so we can use the JSON data outside of this call
    });

    function continueCode(){
      var result; //Prepare result variable for usersearches
      //User is typing in departure field
      $(".input-leave").on("keyup paste", function(){
        $("#display").empty();
        //Grab user input
    var userInput = $(".input-leave").val();
    if(userInput != ''){
      console.log("User input: "+userInput);
      //console.log(airports[0]["Country Code"]);
      for(var i=0; i<airports.length; i++){
        /* Prepare Variables for checking columns of JSON
           cnCode = Country Code
           ctCode = City Code
           stCode = State Code
           apCode = Airport Code
           apName = Airport Name
        */
        var cnCode = airports[i]["Country Code"],
            ctCode = airports[i]["City Code"],
            stCode = airports[i]["State Code"],
            apCode = airports[i]["Airport Code"],
            apName = airports[i]["Airport Name"];
        //Check if user input matches one of our variables

        //This shows the airports on an exact match
        if((userInput.toLowerCase() == cnCode.toLowerCase()) || (userInput.toLowerCase() == ctCode.toLowerCase()) || (userInput.toLowerCase() == stCode.toLowerCase()) || (userInput.toLowerCase() == apCode.toLowerCase()) || (userInput.toLowerCase() == apName.toLowerCase())){
          $("#display").append("Country Code: "+cnCode+", City Code: "+ctCode+", State Code: "+stCode+", Airport Code: "+apCode+", Airport Name: "+apName+"<hr>");
        }

        //This results in every airport being shown at all times
        if((userInput.toLowerCase().indexOf(cnCode.toLowerCase())) !== -1 || (userInput.toLowerCase().indexOf(ctCode.toLowerCase())) !== -1 || (userInput.toLowerCase().indexOf(stCode.toLowerCase())) !== -1 || (userInput.toLowerCase().indexOf(apCode.toLowerCase())) !== -1 || (userInput.toLowerCase().indexOf(apName.toLowerCase())) !== -1){
          $("#display").append("Country Code: "+cnCode+", City Code: "+ctCode+", State Code: "+stCode+", Airport Code: "+apCode+", Airport Name: "+apName+"<hr>");
        }
      }
    }else{
      $("#display").empty();
    }
  });
}
});

如您所见，我现在有两种读取数据的方法，一种显示完整字符串匹配的数据，另一种显示任何字符串的所有数据。 我需要的是在部分字符串命中时显示数据（例如：用户键入“Am”，结果显示任何列中以“am”开头的所有内容）。

我已经在 SO 和 Google 上查看了这里，但我发现的所有内容都是为了显示部分数据，用户发送输入，结果是例如 ID 和名称，我需要在用户显示数据时正在插入数据，但是这对我不起作用，有没有一种快速简便的方法来解决这个问题？我一直找不到任何可以为我做的 JSON 插件，我考虑过使用 ElasticSearch 尝试它，但我不确定我应该如何开始，以及它是否对我有用。

Answer 1

你可以用这个Autocomplete Widget | jquery

基本用法是指定源数组。