Zdarzenie zakłóca wyniki wyszukiwania wtyczki Select2 z ajaxem

Question

Używam opcji Select2 jQuery Igora Vaynberga z opcją Infinite Scroll with Remote Data, aby utworzyć pole wyszukiwania autouzupełniania dla mojej witryny. AJAX działa świetnie, a wyniki są wyświetlane, ale są nie do wybrania - wydarzenie zmiany nigdy nie jest uruchamiane, a po kliknięciu wyniku nic się nie dzieje.

W konsoli Chrome nie ma również żadnych błędów, więc myślę, że to nie jest błąd w składni, a wtyczka błędnie bierze go za wyłączone pole wyboru. EDYCJA: po wypróbowaniu osobnego zdarzenia kliknięcia na liście wyników, która nigdy nie została wystrzelona, ​​jestem teraz pewna, że ​​coś koliduje z wydarzeniami.

Oto mój kod obecnie

// 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: '); 
    } 
}); 

Sam wybierz pole jest tylko wejście z rodzaju: ukryty

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

Answer 1

Twój problem wydaje się, Twoje dane wynik nie posiada właściwość o nazwie "ID". Select2 plugins wants an id field na danych, a jeśli nie, to opcja "nie można wybrać". Możesz podać funkcję id, aby zastąpić to zachowanie:

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