2

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;
        },
    });

したがって、ユーザーが「その他のオプション」の値をクリックすると、選択イベントで次の結果セットを取得し、表示されるドロップダウンに表示したいと考えています。それを実現する方法。正しい方向へのポインタは高く評価されます。

4

1 に答える 1

1

これはハンドラーsearchから呼び出す問題だと思います。selectしかし、お気づきかもしれませんが、これは正しく機能しません。

小さなタイムアウトを追加することで動作させることができるはずです:

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 要求をシミュレートしています。うまくいけば、これが役に立ちます！

于 2013-10-08T19:57:44.933 に答える