jQuery ui 使用 json 文件自动完成

Posted 2023-05-08

【中文标题】jQuery ui 使用 json 文件自动完成

【英文标题】：jQuery ui auto complete with json File

【发布时间】：2017-12-03 12:50:35

【问题描述】：

我正在尝试从 JSON 文件中获取数据 jquery ui autocomplete is not working 。这是我的 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 ui 自动完成中获取这些结果，但它不起作用

 $( 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
);
   );

【问题讨论】：

您是否尝试使用“标签”、“值”之类的标签和值更改 json 属性名称

你能帮我回答一下吗：)

在"check.json?term=" + request.term 上调用 GET 将产生 100% 的结果。除非您的 Web 服务器具有 .json 文件的服务器端处理功能，否则它不会知道如何处理 term。

【参考方案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()。对于这种情况，它没有那么有用，因为它需要一个数组和术语来过滤。

更新

在我看到你的 Fiddle 之后，我将它分成了一个工作示例：

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
  );
);

【讨论】：

我正在创建一个小提琴等待

Uncaught SyntaxError: missing ) after argument list

@TayyabGulsherVohra 已编辑 - 在 $.each() 末尾找到了缺失的 )

我已经尝试过这段代码，但没有任何效果。这段代码没有显示任何响应，但它给出的状态是 200

好的，所以 200 很好，当您查看您的 Network 部分时，您是否在 AJAX 调用的响应中看到 JSON 数据？