JSON的jQuery自动完成

Shivay 发表于 Dev

湿婆

我的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）”。

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

安德鲁·惠特克

您接近了，只需进行一些调整：

$(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参数提供函数时，您实际上是在告诉小部件您要进行过滤。

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

该source选项可被提供的回调函数（或字符串，或阵列）。此函数接受两个参数，request和response。
- request是一个包含有关用户键入内容的信息的对象。您可以通过访问来访问他们键入的内容request.term。
- response是jQueryUI传递您的函数的回调函数。当您准备通知小部件要显示给用户的结果集时，可以调用此函数。
- 官方文档中提供了更多信息。
该search方法手动调用自动完成窗口小部件的搜索功能。同样，更多信息可从官方文档中获得。