如何在 jquery 自动完成结果的末尾添加自定义列表项答案

【问题标题】：How to add custom list item on end of jquery autocomplete results如何在 jquery 自动完成结果的末尾添加自定义列表项
【发布时间】：2010-01-22 21:51:01
【问题描述】：

我正在使用 jquery autocomplete ，并且我已经设置了这些变量

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

如您所见，它返回 5 个列表项（结果），我想添加第六个列表项，其中应该显示一些文本以及除了这 5 个之外存在多少个结果。

我该怎么做？

【问题讨论】：

标签： jquery autocomplete

【解决方案1】：

可能需要围绕这个函数进行编辑。

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

【讨论】：

【解决方案2】：

非常感谢！这就是我所做的

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

【讨论】：

【解决方案3】：

这就是我所做的，我的后端有一个 json 用于这个示例（可能，对于默认 html 的情况，它可以稍微调整一下 :)，但整个想法应该差不多

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

【讨论】：