イベントがSelect2プラグインのajaxで検索された結果を妨害しています

Question

私は、Igor VaynbergのSelect2 jQueryプラグインをInfinite Scroll with Remote Dataオプションで使用して、自分のウェブサイトの検索ボックスを自動補完します。 AJAXはうまくいっており、結果は表示されていますが、選択できません。変更イベントは一度も発生せず、結果をクリックすると何も起こりません。

Chromeコンソールにもエラーが表示されないため、構文エラーではなく、プラグインが無効な選択ボックスで間違っていると思います。 EDIT：結果リストに別のオンクリックイベントを試みたこともありませんでしたが、今はイベントに干渉する何かがあります。選択ボックス自体はタイプとだけ入力する

// Search 
$("#site-search").select2({ 
    placeholder: "Search posts", 
    minimumInputLength: 3, 
    ajax: { 
     url: "http://localhost/mysite/search", 
     dataType: 'json', 
     quietMillis: 500, 
     data: function (term, page) { 
      return { 
       q: term, 
       page_limit: 10, 
       page: page // page number 
      }; 
     }, 
     results: function (data, page) { 
      var more = (page * 10) < data.length; // whether or not there are more results available 

      // return the value of more to tell if more results can be loaded 
      return {results: data, more: more}; 
     } 
    }, 
    formatResult: function(post) { 
     // return html markup for individual result item 
     markup = '<img src="'+post.image+'" style="width:40%;float:left;margin-right:5px">'; 
     markup += '<p>'+post.title+'</p>'; 
     markup += '<div class="clearfix"></div>'; 
     return markup; 
    }, 
    formatSelection: function(post) { 
     // This shows up in the select box 
     return post.title; 
    }, 
    dropdownCssClass: "bigdrop" // apply css that makes the dropdown taller 
}).on('change', function(e) { 
    try { 
     var slug = e.val.slug; 
     window.location.href = "http://localhost/mysite/posts/"+slug; 
    } catch(error) { 
     console.log('Selected search result is invalid: '); 
    } 
}); 

ここに私のコードは、現在だ

、：

<input type="hidden" class="bigdrop" id="site-search" style="width:100%;height:auto"> 

Answer 1

あなたの問題隠されたあなたの結果データがという名前のプロパティを持っていない、のように思えます"id"。 Select2 plugins wants an id fieldがデータにあり、そうでない場合は、オプション「選択不可」になります。この動作を無効にするためのid関数を与えることができます：

$("#site-search").select2({ 
    id: function(obj) { 
     return obj.slug; // use slug field for id 
    }, 
    ...