如何使jQuery插件自动完成像谷歌替换结果

How to make the jQuery plugin Autocomplete like Google replace results?

本文关键字:成像 谷歌 替换 结果 何使 jQuery 插件      更新时间:2023-09-26

我像谷歌一样使用jQuery插件Autocomplete来处理两个表单字段——foobar(这取决于foo):

$(function() {
    $("#foo").autocomplete({
        minLength: 3,
        limit: 5,
        source : [{
            url:"/my/ajax/controller/foo?data[foo_number]=%QUERY%",
            type:'remote'
        }],  
    });
});
$(function() {
    $("#bar").autocomplete({
        minLength: 3,
        limit: 5,
        source : [
            function(query, add) {
                fooNumber = $('#foo-number').val();
                $.getJSON("/my/ajax/controller/bar?data[number]=" + query + "&data[foo_name]=" + fooNumber, function(response) {
                    add(response);
                })
        }],  
    });
});

它基本上可以工作,但字段bar存在问题。自动完成AJAX请求的每一个进一步结果都被添加到最后一个结果中,而不是替换。这导致了1。重复窦和2。过时的条目,例如当前AJAX请求没有得到任何新结果,并且显示为上一个请求检索到的列表。

我的代码出了什么问题如何每次只获取jsut检索到的结果

我需要的选项调用appendMethod:

$(function() {
    $("#bar").autocomplete({
        minLength: 3,
        limit: 5,
        appendMethod:'replace',
        source : [
            function(query, add) {
                fooNumber = $('#foo-number').val();
                $.getJSON("/my/ajax/controller/bar?data[number]=" + query + "&data[foo_name]=" + fooNumber, function(response) {
                    add(response);
                })
        }],  
    });
});