jquery 自动完成-将数据添加到选择事件列表中

Question

我正在使用带有 json 数据源的 jquery 自动完成功能。

这是我的代码:clientId、clientName 是输入字段的 id。

$("#clientId").autocomplete({
        source: function(request, response){
            var clientId=request.term;
            $.ajax({
                type:"GET",
                url:"getClients.htm?ClientId=" + clientId +"&ClientName=",
                dataType:"json",
                success: function(data){
                    if(pageCountClientId == 0){
                data.push({clientId:"More Options",clientName:"More Options"});
                        pageCountClientId++;
                    }
                    else{
                data.push({clientId:"Previous Options",clientName:"Previous Options"});
                        pageCountClientId++;
                    }
                    response($.map(data,function(value,key){
                        return{
                            label:value.clientId,
                            value:value.clientName
                        };
                    }));                                    
                }
            });
        },
        minLength: 1,
        select: function(event, ui){
            if(ui.item.value == "More Options"){
                pageCountClientId++;
            }
            else if(ui.item.value == "Previous Options"){
                pageCountClientId--;
            }
            else{
                $("#clientName").val(ui.item.value);
                $("#clientId").val(ui.item.label);
                $("#clientName").attr("disabled", "disabled"); 
                $("#clientId").attr("disabled", "disabled");
            }
            return false;
        },
    });

现在，当用户单击“更多选项”值时，在选择事件中我想获取下一组结果并将其显示在出现的下拉列表中。如何实现它。任何正确方向的指示将不胜感激。

Answer 1

我认为这应该是从 select 处理程序调用 search 的问题。然而，正如您可能已经发现的那样，这不起作用 quite right .

您应该能够通过添加一个小的超时来使其工作:

select: function(event, ui){
    if(ui.item.value == "More Options"){
        pageCountClientId++;
        setTimeout($.proxy(function () {
            $(this).autocomplete('search', this.value);
        }, this), 1);
    }
    else if(ui.item.value == "Previous Options"){
        pageCountClientId--;
        setTimeout($.proxy(function () {
            $(this).autocomplete('search', this.value);
        }, this), 1);
    }
    else{
        $("#clientName").val(ui.item.value);
        $("#clientId").val(ui.item.label);
        $("#clientName").attr("disabled", "disabled"); 
        $("#clientId").attr("disabled", "disabled");
    }
    return false;
},

示例: http://jsfiddle.net/fTFkY/2/

该示例使用本地源，但模拟 AJAX 请求。希望这有帮助!