Comment ajouter un élément de liste personnalisée à l'extrémité de saisie semi-automatique jquery résultats

Question

J'utilise jquery autocomplete, et je l'ai mis ces vars

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

Comme vous pouvez le voir retourne 5 éléments de la liste (résultats), et je vouloir ajouter un sixième élément de liste où devrait être affiché du texte et combien de résultats existent, sauf ceci 5.

Comment faire cela?

Answer 1

Il est probablement va nécessiter une modification autour de cette fonction.

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

Vous devez modifier le plug-in réelle de le faire ...

Answer 3

Merci beaucoup! Voici ce que je faisais

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

Voici ce que je faisais, j'ai JSON mon back-end pour cet exemple (probablement, pour le cas du HTML par défaut, il peut être modifié un peu :), mais l'ensemble idée devrait être de la même

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