5

複数の結果とリモート データソースで jquery オートコンプリートを使用しています。データをリモートでプルして、複数の結果を選択できます。しかし、結果リストは最初の 2 文字の入力に基づいて更新されず、jQueryUI のドキュメントはこの問題については不十分です。

私は調査しましたが、SOでこの回答を見つけて、それを私の機能の残りの部分と統合したいと思っていますが、結果リストは更新されません。独立して、SO の回答は正常に機能しますが、複数の結果とリモート データソースと統合すると機能しません。

オートコンプリート/リモート ソース/複数関数から (省略)。この部分はうまくいきます：

.autocomplete({
                source: function( request, response ) {                            
                     $.ajax({
                        url: "/controller/myfunction",
                        dataType: "json",
                        data: request,
                        success: function(data){
                        if(data.response == 'true') {
                            response(data.message);
                            }
                        }
                    });
                },

SO で考えられる解決策: (独立しては正常に動作しますが、jquery/remote/multiple コードでは動作しません): 

var wordlist= [ "about", "above", "within", "without"];

$("#input1").autocomplete({
    source: function(req, responseFn) {
        var re = $.ui.autocomplete.escapeRegex(req.term);
        var matcher = new RegExp( "^" + re, "i" );
        var a = $.grep( wordlist, function(item,index){
            return matcher.test(item);
        });
        responseFn( a );
    }
});

このソリューションをコードに統合する必要があります。

4

5 に答える 5

3

jQuery UI Autocomplete: Search from Beginning of String から、次のことを試すことができます。 

$("#YOUR_TEXT_INPUT").autocomplete({
    source: function(req, response) { 
       $.ajax({
        url: "/controller/myfunction",
        dataType: "json",
        success: function( data ) {
            var re = $.ui.autocomplete.escapeRegex(req.term);
            var matcher = new RegExp( "^" + re, "i" );
            response($.grep(data, function(item){return matcher.test(item.value);}) );
            }
        });
     },
      minLength: 2,
      select: function(event, ui) {
          //custom select function if needed
       }
    });
于 2012-10-28T22:45:44.047 に答える
1

最適には、フィルタリングされたデータを JSON で配信するのはコントローラーである必要があります。ビューではなくコントローラーでデータをフィルタリングすることをお勧めします。アプリケーションが MVC 指向の場合、指定したコントローラー アクション内で使用されるモデル内のすべてのクエリとフィルター処理を保持する必要があります。AJAX (Asynchronous Javascript and XML) を使用して、できるだけ多くの負荷をサーバーに渡す必要があると思います。したがって、ビューコードはかなり単純になります

var wordlist= [「約」、「上」、「内」、「外」];

$("#input1").autocomplete({
    source: 'url-to-controller/myAction', //Notice I'm using a string
    minLength: 2
});

Autocomplete|jQuery Ui - ソースは次のように述べています。

... 文字列が使用される場合、オートコンプリート プラグインは、その文字列が JSON データを返す URL リソースを指していると想定します。同じホスト上または別のホスト上にある可能性があります (JSONP を提供する必要があります)。オートコンプリート プラグインは結果をフィルター処理しません。代わりにterm、サーバー側スクリプトが結果をフィルター処理するために使用するフィールドにクエリ文字列が追加されます。たとえば、source オプションが に設定され "http://example.com"、ユーザーがを入力した場合foo、GET 要求は に対して行われhttp://example.com?term=fooます。データ自体は、上記のローカル データと同じ形式にすることができます。

上記に基づいて、termGET 要求を使用するようにコントローラー アクションを変更して、クエリ内のデータをフィルター処理するために使用することができます。

于 2012-11-06T15:50:13.550 に答える
1

json dataType で $.ajax を使用しているため、 data.message は配列であり、不要な項目を削除してフィルター処理できます。
ajax msg Array が以下のサンプル json から構築されていると仮定すると、 

{"id":"Nycticorax nycticorax","label":"Black-crowned Night Heron","value":"Black-crowned Night Heron"},{"id":"Ardea purpurea","label":"Purple Heron","value":"Purple Heron"},{"id":"Circus cyaneus","label":"Hen Harrier","value":"Hen Harrier"},{"id":"Alcedo atthis","label":"Common Kingfisher","value":"Common Kingfisher"},{"id":"Oxyura leucocephala","label":"White-headed Duck","value":"White-headed Duck"},{"id":"Oenanthe oenanthe","label":"Northern Wheatear","value":"Northern Wheatear"},{"id":"Tadorna tadorna","label":"Common Shelduck","value":"Common Shelduck"},{"id":"Ardea cinerea","label":"Grey Heron","value":"Grey Heron"},{"id":"Ficedula hypoleuca","label":"Eurasian Pied Flycatcher","value":"Eurasian Pied Flycatcher"},{"id":"Motacilla flava","label":"Blue-headed Wagtail","value":"Blue-headed Wagtail"},{"id":"Muscicapa striata","label":"Spotted Flycatcher","value":"Spotted Flycatcher"},{"id":"Accipiter gentilis","label":"Northern Goshawk","value":"Northern Goshawk"}

したがって、それぞれが入力された用語で始まる場合、「値」をチェックする必要があります。
オートコンプリート コードを次のコードに置き換えるだけです。 

.autocomplete({
    source: function( request, response ) {                            
            $.ajax({
            url: "/controller/myfunction",
            dataType: "json",
            data: request,
            success: function(data){
                if(data.response == 'true') {
                    var t = true;
                    var i = 0;
                    var ptrn = new RegExp("^" + request.term, "i");
                    while (t) {
                        if (!ptrn.test(data.message[i].Name)) {
                            data.message.splice(i, 1)
                        } else {
                            i++
                        };
                        if (i == data.message.length) {
                            t = false;
                        }
                    }
                    response(data.message);
                }
            }
        });
    },
    ...
});
于 2012-11-06T19:41:06.897 に答える
1

jQuery autocomplete は、ユーザーが入力した内容を HTTP パラメーターとして送信するため、それを使用して、DB から取得した結果を変更できます。

これが例です（CakePHPで）。ユーザーが入力した内容を含む「用語」パラメーターを取得し、それを使用して DB クエリを生成します。

于 2012-10-28T22:42:21.317 に答える
0 
 $("#certi_name").autocomplete({
                source: "/controller/myfunction",
                minLength: 2,
                select: function(event, ui) {
                    $('#certi_name').val(ui.item.value);
                    $('#certi_id').val(ui.item.id);

                }
            });

これが私の機能です。私はそれを使用しており、正常に動作しています。

function certificationsAction()
    {
        $cert_obj = new Model_Certification();
        $obj=$this->getRequest();
        $term=$obj->getParam('term');//You will get passing keyword with the name term
        if($term)
        {
            $ins_arrs=$cert_obj->getMatchingCertifications($term);
            $return_arr = array();
            foreach($ins_arrs as $ins)
            {
                $row_arr['id']=$ins['certification_id'];
                $row_arr['value']=$ins['certification_name'];
                array_push($return_arr, $row_arr);
            }
            echo json_encode($return_arr);die;
        }

    }
于 2012-11-07T09:33:47.950 に答える