Jak dodać niestandardowy element listy na końcu jquery autouzupełniania powoduje

Question

Używam jquery autouzupełniania i mam ustawić te vars

$("#some_id").autocomplete("search.php?in=somewhere", { 
     width: 270, 
     selectFirst: false 
}); 
$('#some_id').setOptions({max: 5}); 

Jak widać zwraca 5 Pozycji (wyniki), a ja chcesz dodać szósty element listy, gdzie powinien być pokazany tekst i ile wyników istnieje oprócz tego 5.

Jak to zrobić?

Answer 1

Jest prawdopodobnie będzie wymagać zmienił wokół tej funkcji.

function fillList() { 
     list.empty(); 
     var max = limitNumberOfItems(data.length); 
     for (var i=0; i < max; i++) { 
      if (!data[i]) 
       continue; 
      var formatted = options.formatItem(data[i].data, i+1, max, data[i].value, term); 
      if (formatted === false) 
       continue; 
      var li = $("<li/>").html(options.highlight(formatted, term)).addClass(i%2 == 0 ? "ac_even" : "ac_odd").appendTo(list)[0]; 
      $.data(li, "ac_data", data[i]); 
     } 
     // INSERT YOUR ADDITIONAL ENTRY HERE... 
     listItems = list.find("li"); 
     if (options.selectFirst) { 
      listItems.slice(0, 1).addClass(CLASSES.ACTIVE); 
      active = 0; 
     } 
     // apply bgiframe if available 
     if ($.fn.bgiframe) 
      list.bgiframe(); 
    } 

Answer 2

Musisz zmodyfikować rzeczywistą wtyczki do zrobienia, że ​​...

Answer 3

Wielkie dzięki! Oto co zrobiłem

function fillList() { 
    list.empty(); 
    var max = limitNumberOfItems(data.length); 
    for (var i=0; i < max; i++) { 
    if (!data[i]) 
    continue; 
    var formatted = options.formatItem(data[i].data, i+1, max, data[i].value, term); 
    if (formatted === false) 
    continue; 
    var li = $("<li/>").html(options.highlight(formatted, term)).addClass(i%2 == 0 ? "ac_even" : "ac_odd").appendTo(list)[0]; 
    $.data(li, "ac_data", data[i]); 
    } 

    listItems = list.find("li"); 

    //////////////////////////// TOM ////////////////////////////////////////////////////////////////////////////////// 
    if(data.length > 5){ 
    if((data.length-5) == 1){ 
    listItems[4].innerHTML +='<div style="position:absolute; top:127px; left:0px; width:260px;text-align:right;" >'+(data.length-5)+' item isn\'t shown</div>'; 
    } 
    else{ 
    listItems[4].innerHTML +='<div style="position:absolute; top:127px; left:0px; width:260px;text-align:right;" >'+(data.length-5)+' items aren\'t shown</div>'; 
    } 
    } 
    /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 

    if (options.selectFirst) { 
    listItems.slice(0, 1).addClass(CLASSES.ACTIVE); 
    active = 0; 
    } 
    // apply bgiframe if available 
    if ($.fn.bgiframe) 
    list.bgiframe(); 
} 

Answer 4

Oto co zrobiłem, mam json w moim backend dla tego przykładu (prawdopodobnie, dla przypadku domyślnego html może być manipulowane nieco :), ale cały pomysł powinien być o tym samym

$('#search').autocomplete({ 
    source: function(request, response) { 
     var requestUrl = 'search.php'; 
     requestUrl += '?term=' + $('#search').val(); 
     $.getJSON(requestUrl, request, function(data){ 
      // I know here - what kind of array of json objects I'll get as 
      // a result, with <li> elements it should be even easier (I guess) 
      // AND: this will add item, if there are more than 5 elms in the list, 
      // but you should get the idea 
      if (5 < data.length) { 
       data.push({ 
        id: -1, 
        value: '', 
        label: 'Put your own question...' 
       }); 
      } 
      response(data); 
     }); 
    } 
});