2016-12-27 7 views
0

私は人が都市名を入力するはずの入力ボックスを持っており、入力したものをAPIに送信して、それを自動的に取得します現在利用可能なジョブへのバックエンド、そしてEasyAutocompleteプラグインでオプションのデータ配列を動的に更新することになっている結果の配列をajax経由で返信することです。EasyAutocomplete - すべてのキーアップでのAjax更新オプションオブジェクト

$(function() { 
    var minlength = 3; 
    $(document).on('keyup','#mainSearch2',function() { 
     var that = this, 
     inputVal2 = $("#mainSearch2").val(); 

     if (inputVal2.length >= minlength) { 
      if (searchRequest != null) 
       searchRequest.abort(); 
      searchRequest = 
      $.ajax({ 
        type: "POST", 
        url: 'myurltotheapi', 
        data: { 
        apiKey: "myapikey", // required 
        city: inputVal2, 
        page: 0, // optional, which page of the results, starts at "0", defaults to "0" 
        perPage: 20 // optional, results per page, defaults to "20" 
        }, 
        success: function (apiResponse2){ 
         if (inputVal2==$(that).val()) { 
        //Receiving the result of search here 
         options = {data: []}; 
         options.data = apiResponse2.locations.map(function (el) { 
          return el.city+", "+el.state; 
         }); 
         $("#mainSearch2").easyAutocomplete(options); 
        } 
        } 
     }); 
     } 
    }); 
}); 

だから、現在何が起こるのか、3文字目の後にすべてのキーストロークで、入力の下の自動補完リストが正しい値に自分自身をリフレッシュするということですが、その全体の窓:ここ

コードです結果を示した後、1秒ごとに消散します。入力ボックスもフォーカスを失っているので、手動入力する必要があります。入力するには、さらに入力してください(ただし、簡単な結果を選択することはできません。早く消えてしまいます。 chrome開発ツールでは、 ".easy-autocomplete" divクラスが削除されて再度追加されるように見えます。

EasyAutocompleteがキーストロークごとに値を動的に送信し、API結果からoptions.dataにコンテンツをプルすることをサポートしているかどうか、これらすべてのキーアップなしで、これを行うより良い方法があるかどうか疑問に思っています配列&は、入力ボックスと消耗しやすいeasyautocomplete結果ウィンドウにフォーカスを当てずに適用します。

ありがとうございます!ここで

答えて

0

が答えです:

$(function() { 
    $('#mainSearch2').easyAutocomplete({ 
    url: 'myurl', 
    ajaxSettings: { 
     dataType: "json", 
     method: "POST", 
     data: { 
     apiKey: "myapikey" 
     } 
    }, 
    listLocation: "suggestions", 
    preparePostData: function(data) { 
     data.query = $('#mainSearch2').val(); 
     return data; 
    }, 
    requestDelay: 400 
    }); 
}); 
関連する問題