javascript - JSON 的 jQuery 自动完成

Question

我的JSON是这样的

var data = [{"code":"1162","format":"Subscription","name":"Picture Manager ","action":"202"},
{"code" : "1094","format":"Store","name":"Listing Designer","action":"168"},
{"code" : "1407","format":"Subscription","name":"MOTOR_PACKAGE","action":"403"},
{"code" : "1024","format":"Fixed Price","Name":"Picture","action":"120"},
{"code" : "1051","format":"Auction","name":"Gallery Days","action":"49"},
{"code" : "5059","format":"Lead Generation","name":"Scheduled Listings","action":"160"}];

我可以创建一个建议函数，例如

jQuery

$(document).ready(function(){
    serverurl = "getJson";
    $.getJSON( serverurl, function(data) {
        $("#feeCode").autocomplete({
            source: function (request, response) {
                response($.map(data, function(v,i){
                    return {
                             label: v.format+' / '+v.name+' ('+v.code+')' ,
                             value: v.format+' / '+v.name+' ('+v.code+')'
                    };
                }));
            }
        });
    }); 
});

HTML

<input class="catinputbox" type="text" id="feeCode" >

它会像这样显示建议

Auction / Gallery Days (1051)
Fixed Price / Picture (1024)

但它不是搜索模式，建议是静态的。我想搜索并为他提供的字符串提供适当的建议。例如，如果他输入“固定”，建议应该是“固定价格/图片 (1024)”，或者如果他输入“天数”或“1051”，那么建议应该是“拍卖/画廊天数 (1051)”。

我以前从未使用过自动完成功能，所以如果有人可以向我解释自动完成、请求、响应和搜索。这对我很有帮助

Answer 1

你很接近，只是一些调整:

$(document).ready(function() {
    serverurl = "getJson";

    $.getJSON(serverurl, function(data) {
       /* When the response comes back, create an array of objects that the 
        * autocomplete widget can use, using `$.map`:
        */
        var autocompleteData = $.map(data, function(v, i) {
            return {
                label: v.format+' / '+v.name+' ('+v.code+')' ,
                value: v.format+' / '+v.name+' ('+v.code+')'
            };
        });

        /* Initialize the autocomplete widget with the prepared data: */
        $("#feeCode").autocomplete({
            source: autocompleteData
        });
    }); 
});

示例: http://jsfiddle.net/fny66zkd/

在这种情况下，您不需要为 source 参数提供函数。如果您想执行自定义 AJAX 请求或某些其他类型的自定义过滤功能，您可以这样做。

您的代码之前无法正常工作，因为当您向 source 参数提供函数时，您实际上是在告诉小部件您 想要进行过滤。

I have never used the autocomplete before so if any one can explain me autocomplete, request, response and search. That will be very helpful for me

• source 选项可以提供回调函数(或字符串，或数组)。此函数接受两个参数，request 和 response。
  • request 是一个包含有关用户键入内容的信息的对象。您可以通过访问 request.term 访问他们键入的内容。
  • response 是jQueryUI传递给你的函数的回调函数。当您准备好将要向用户显示的结果集通知小部件时，您可以调用此函数。
  • 更多信息请参阅 official documentation .
• search 方法手动调用自动完成小部件的搜索功能。同样，更多信息可在 official documentation 中找到。 .