javascript - 在 jQuery 中使用 AJAX 以表格格式自动完成显示来自 JSON 的两列

Question

目前正在研究 jQuery 自动完成功能，我可以从 JSON 单列数据生成数据，但我希望标签和描述中应显示两个值

这是我的json

[{"id":"Emirates College of Technology- UAE","label":"COL000001","value":"COL000001"}, {"id":"Al Khawarizmi nternational ollege- UAE","label":"COL000002","value":"COL000002"}, {"id":"Syscoms ollege","label":"COL000003","value":"COL000003"}, {"id":"Abounajm Khanj Pre-Uni enter","label":"COL000004","value":"COL000004"}, {"id":"Advanced lacement","label":"COL000005","value":"COL000005"}, {"id":"Al Buraimi College Uni Clge)","label":"COL000006","value":"COL000006"}, {"id":"Al-Ain Community ollege","label":"COL000007","value":"COL000007"}, {"id":"AMA Computer ollege","label":"COL000008","value":"COL000008"}, {"id":"Arab Academy for Bankg nd Fin","label":"COL000009","value":"COL000009"}, "id":"ARABACDSCITECHMARTIMETRNS","label":"COL0000010","value":"COL0000010"}, "id":"Arapahoe Community College","label":"COL0000011","value":"COL0000011"}, {"id":"Other","label":"Other","value":"Other"}]

这是我的 jquery 代码

$("#scl_name").autocomplete({
highlightClass: "bold",
 source: function( request, response ) {
      var regex = new RegExp(request.term, 'i');
      //var filteredArray = filteredArray.slice(0,10);
    $.ajax({
        url: "json/dummy.json",
        dataType: "json",
        data: {term: request.term},
        success: function(data) {
            response($.map(data, function(item) {
                if(regex.test(item.label)){
                    var html="";
                    html += "<table>";
                    html += "   <tr>";
                    html += "       <td>"+addslashes(item.label)+"</td>";
                    html += "       <td>"+addslashes(item.id)+"</td>";
                    html += "   </tr>";
                    html += "</table>";
                    return {
                        value: html,
                        value: item.id,
                        value: item.label
                    };
                }
            }));
        },

    });
},
select: function(event, ui) {
     $('#school_Name').val(ui.item.id);
}
});   
 });

 function addslashes(string) {
    return string.replace(/\\/g, '\\\\').
    replace(/\u0008/g, '\\b').
    replace(/\t/g, '\\t').
    replace(/\n/g, '\\n').
    replace(/\f/g, '\\f').
    replace(/\r/g, '\\r').
    replace(/'/g, '\\\'').
    replace(/"/g, '\\"');
 }

通过上面的代码，我得到了第一列的数据，但不是第二列的第二列，我得到的值是未定义的

我做错了什么？

ReferenceError: Item is not defined
html += "       <th>" + Item + "</th>";

Answer 1

好吧，这就是我的帮助。在处理 JSON 时，如果您可以确定收到的是您所期望的，那么首先会更好。为此，您在 AJAX 响应中有一个名为 .success 的函数，它会解析每个 JSON 项目(这将是您的第一个项目:{"id":"Emirates College of Technology- UAE","label":"COL000001", “值”:“COL000001”})

为了确保您收到 id、label 和 value 元素，我将在您的成功函数中执行类似的操作:

console.log(item.id);

console.log(item.label);
console.log(item.value);

或者直接

console.log(item); // this will be presented as an object you can examine on your chrome browser, for example.

如果您确定您在客户端获取值，那么我将解决您从函数返回时遇到的问题，因为您可能知道您只能返回一个值，而不是三个:

return {
                        value: html,
                        value: item.id,
                        value: item.label
                    };

将其更改为:

return {
                        value: html,
                    };

因为您似乎已经在创造全部值(value)。如果这不是您的问题，请再次发回。

如果你想添加一个标题，这样做:

var html = "";
    html += "<table>";
    html += " <tr>";
    html += "   <th>" + Title + "</th>";
    html += "   <th>" + Description + "</th>";
    html += " </tr>"; 
    html += " <tr>"; 
    html += "   <td>" + addslashes(item.label) + "</td>";
    html += "   <td>" + addslashes(item.id) + "</td>";
    html += " </tr>"; 
    html += "</table>";