Question

我的应用程序中有一个自动完成功能，它向服务器发出ajax请求。但是，一旦我从服务器获取数据，我想使用查找功能而不是使用服务URL（以最小化对服务器的调用）。

以下是我的js的样子

$('#country').autocomplete({
    serviceUrl : './countryCache?',
    paramName : 'countryName',
    transformResult : function(response) {
        return {
            // must convert json to javascript object before process
            suggestions : $.map($.parseJSON(response), function(item) {
                return {
                    data : item.name
                };
            })
        };
    },
    showNoSuggestionNotice:true,
    onSelect: function (value, data) {
        $('#countryId').val(value.data);

    }

});

以下是我的ajax调用countryCache的示例 - “印度，冰岛，印度尼西亚”。如果用户键入了I，则服务器将返回上面的结果。现在，当用户在我之后键入n时，我不想再次调用服务器。有人可以帮助我实现它。

Answer 1

jQuery UI Autocomplete documentation中有一个简单的解决方案。在那里，您将找到标题为远程缓存的部分，其中显示了如何实现您要查找的内容。

我将该网站的代码改编为这个问题，并添加了一些注释以澄清：

var cache = {};
$( "#country" ).autocomplete({
    source: function( request, response ) {
        // If the term is in the cache, use the already existing values (no server call)
        var term = request.term;
        if ( term in cache ) {
            response( cache[ term ] );
            return;
        }

        // Add countryName with the same value as the term (particular to this question)
        // If the service reads the parameter "term" instead, this line can be deleted.
        request.countryName = request.term;

        // Call the server only if the value was not in the cache
        $.getJSON( "./countryCache", request, function( data, status, xhr ) {
            cache[ term ] = data;
            response( data );
        });
    },
    select: function (event, data) {
        $('#countryId').val(data.item.value);
    }
});

由于我并不知道JSON的格式，我只使用了一个基本的文本＆＃34; In＆＃34;返回：["India","Indonesia","Spain"]（没有id，只是一个普通的数组）。

如果您使用的是Ajax AutoComplete plugin for jQuery（上面的代码看起来像，但问题标有jquery-ui-autocomplete），那么您不必担心缓存，因为该插件会自动为您执行。

来自插件的文档：

noCache：布尔值，指示是否缓存建议结果。默认false。

由于您没有为nocache指定任何值，因此它将采用false的默认值，并且它将直接执行缓存。

Answer 2

我最终根本没有使用这种方法，而是使用限制为100的快速，快速搜索。但是自从我问过，这是我仅使用第一个字符发送请求的方式：

 // global variables: models [], result {}

          lookup: function(query, done) {

                var mdl = $("#autocomplete").val();
                if (mdl.length == 0) {
                    names = [];
                    result.suggestions = models;
                    done(result);
                    return;
                } else if (mdl.length != 1) {
                    result.suggestions = names;
                    console.log(result);
                    done(result);
                    return;
                }

                var jqHXR = $.ajax({url: "search.php",   
                        data: {"q": mdl},
                        dataType: "json",
                        method: "GET" }
                )
                .done(function(data, status, jqXHR){
                    models = [];
                    $.each( data, function( key, val) {
                        names.push({ value: val.u, data: { category: genders[val.g] } });
                    });

                    result.suggestions = names;
                    done(result);
                })
                .fail(function (data, status, errorThrown) {
                        console.log("failed: "+status+"| error: "+errorThrown);
                        console.log(data);
                });
            },

Answer 3

我的一位同事使用了devbridge，我的研究似乎验证了minChars和lookupLimit的devbridgeAutocomplete对象的属性。也许有不同的devbridgeAutocomplete实例，但我认为值得张贴以防它们相似，但我认为你已经看过它们了。）。

以下是代码：

var a =  $('#<%= txtFindName.ClientID %>').devbridgeAutocomplete({
           minChars: 3,
           lookupLimit: 20,
            serviceUrl: 'AutoComplete/ADUsers.aspx',
            onSelect: function (suggestion) {
                $('#<%= txtTo.ClientID %>').val( $('#<%= txtTo.ClientID %>').val() + ',' + suggestion.data);
                $('#<%= txtFindName.ClientID %>').val('');
            }
       });

在jquery自动完成中使用查找和/或服务URL

3 个答案: