¿Cómo añadir elemento de la lista personalizada en final de autocompletar jQuery resultados

Question

estoy usando jQuery autocompletar, y me he fijado estos VARs

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

Como se puede ver que devuelve 5 elementos de lista (resultados), y yo desea agregar el sexto elemento de la lista donde se debe mostrar el texto y cuántos resultados existen, excepto este 5.

¿Cómo puedo hacer eso?

Answer 1

Es probable va a requerir una edición en torno a esta función.

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

Tendrá que modificar el plugin real para hacer eso ...

Answer 3

¡Muchas gracias! Aquí es lo que hice

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

Aquí es lo que hice, tengo un JSON en mi backend para este ejemplo (probablemente, para el caso de html por defecto que puede ser ajustado un poco :), pero el conjunto idea debe ser aproximadamente la misma

$('#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); 
     }); 
    } 
});