在jQuery自动完成的表格格式中，使用AJAX显示两个来自JSON的列。

Currently working on jQuery auto complete where I can able to generate data from JSON single column data, but I want two values should be displayed label and descirption

目前正在开发jQuery auto complete，在这里我可以从JSON单列数据生成数据，但是我希望显示两个值标签和解压

this is my 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"}]

Here is my jquery code

这是我的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, '\\"');
 }

With this above code I am getting the data, for first column but not for second column in second column i am getting the value as undefined

有了上面的代码，我将获得数据，对于第一列而不是第二列，我将得到未定义的值

what I am doing wrong here?

我做错了什么?

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

1 个解决方案

#1

Well, here it goes my help. When dealing with JSON is better if you can be sure that you are receiving what you are expecting, first of all. To do this you have a function called .success on your AJAX response and this parses each JSON item (this will be your first item: {"id":"Emirates College of Technology- UAE","label":"COL000001","value":"COL000001"})

这是我的帮助。当处理JSON时，如果您能够确定您正在接收您所期望的内容，那么首先要处理JSON。为此，在AJAX响应上有一个名为.success的函数，它解析每个JSON条目(这将是您的第一个条目:{“id”:“Emirates College of Technology- UAE”，“label”:“COL000001”，“value”:“COL000001”)

To be sure you are receiving the id, label and value elements I will do something like this inside your success function:

为了确保您收到了id、标签和值元素，我将在您的success函数中做如下操作:

console.log(item.id);

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

or just directly

还是直接

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

if you are sure you are getting the values on the client then I will be fixing the problem you are having when returning from the function, as you may know you can only return one value, not three:

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

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

Change it to :

把它改成:

return {
                        value: html,
                    };

as you seem to be creating the entire value already. If this is not your issue, please post back again.

因为你似乎已经创造了整个价值。如果这不是你的问题，请再次发帖。

If you want to add a heading this will do it:

如果你想添加标题，它会这样做:

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

#1