jQuery ui auto使用json完成文件

Question

我想從JSON文件中獲取數據jquery ui autocomplete不工作。這是我的JSON數組

[ 
{ 
    "FIELD1": "A", 
    "FIELD2": "B", 
    "FIELD3": "C" 
}, 
{ 
    "FIELD1": "ITEM ", 
    "FIELD2": "RATE LIST", 
    "FIELD3": "HSN Code" 
}, 
{ 
    "FIELD1": "HORSES - PURE-BRED BREEDING ANIMALS ", 
    "FIELD2": "0.12", 
    "FIELD3": "1011010" 
}, 
{ 
    "FIELD1": "ASSES - PURE-BRED BREEDING ANIMALS ", 
    "FIELD2": "0", 
    "FIELD3": "1011020" 
}] 

我試圖獲取這些結果的jQuery用戶界面自動完成功能，但它不工作

$(function() { 
    $('#tags').autocomplete({ 
    source: function (request, response) { 
     $.getJSON("check.json?term=" + request.term, function (data) { 
      response($.map(data.dealers, function (value, key) { 
       return { 
        label: value, 
        value: key 
       }; 
      })); 
     }); 
    }, 
    minLength: 2, 
    delay: 100 
}); 
    }); 

Answer 1

既然你不能改變的JSON文件，我會建議：

source: function (request, response) { 
    $.getJSON("check.json", function (data) { 
    var results = []; 
    console.log("Data:", data); 
    $.each(data, function(k, v){ 
     console.log("Checking if", request.term, "is part of", v.FIELD1); 
     if(v.FIELD1.indexOf(request.term) == 0){ 
     console.log("True"); 
     results.push({ 
      label: v.FIELD1, 
      value: v.FIELD2, 
      hsn: v.FIELD3, 
      oData: v 
     }); 
     } else { 
     console.log("False"); 
     } 
    }); 
    console.log("Sending results:", results); 
    response(results); 
    }); 
} 

由於它是JSON而不是服務器端腳本文件，因此會得到所有結果。然後，您需要查找請求條款。這是$.each()有幫助的地方。您也可以使用$.ui.autocomplete.filter()。對於這種情況，它不是很有用，因爲它需要一個數組和術語來過濾。

UPDATE

我看到了你的小提琴後，我分叉成一個工作示例：

https://jsfiddle.net/Twisty/uejaafuk/

的JavaScript

var myData = [{ 
    "FIELD1": "A", 
    "FIELD2": "B", 
    "FIELD3": "C" 
}, { 
    "FIELD1": "ITEM ", 
    "FIELD2": "RATE LIST", 
    "FIELD3": "HSN Code" 
}, { 
    "FIELD1": "HORSES - PURE-BRED BREEDING ANIMALS ", 
    "FIELD2": "0.12", 
    "FIELD3": "1011010" 
}, { 
    "FIELD1": "ASSES - PURE-BRED BREEDING ANIMALS ", 
    "FIELD2": "0", 
    "FIELD3": "1011020" 
}]; 

$(function() { 
    $('#tags').autocomplete({ 
    source: function(request, response) { 
     //$.getJSON("check.json", function(data) { 
     $.ajax({ 
     type: "POST", 
     dataType: "JSON", 
     data: { 
      json: JSON.stringify(myData) 
     }, 
     url: "/echo/json/", 
     success: function(data) { 
      var results = []; 
      console.log("Data:", data); 
      $.each(data, function(k, v) { 
      console.log("Checking if", request.term, "is part of", v.FIELD1); 
      if (v.FIELD1.toLowerCase().indexOf(request.term.toLowerCase()) == 0) { 
       console.log("True"); 
       results.push({ 
       label: v.FIELD1, 
       value: v.FIELD2, 
       hsn: v.FIELD3, 
       oData: v 
       }); 
      } else { 
       console.log("False"); 
      } 
      }); 
      console.log("Sending results:", results); 
      response(results); 
     } 
     }); 
    }, 
    minLength: 2, 
    delay: 100 
    }); 
});