将“全部显示”添加到Jquery自定义自动完成功能的列表底部

Question

如何在具有类别的“自动完成”底部创建链接？ Ly MVC应用程序使用jQuery的autocomplete和catcomplete通过文本框显示选择和类别

我想在列表底部显示“全部显示”，这实际上将单击带有空字符串文本框的搜索按钮。 （搜索按钮功能已经实现，搜索字符串为空将返回所有

所以

1. 将“显示全部”附加到列表底部的jQuery代码段是什么？
2. 在项目选择上，点击搜索按钮功能？

3. 在项目上选择“全选”，将搜索框的值设置为“”，然后单击搜索？

    public class SearchCriteria { public string label { get; set; } public string category { get; set; } } <label for="search">Search: </label> <input id="search"> <script> $.widget("custom.catcomplete", $.ui.autocomplete, { _renderMenu: function (ul, items) { var that = this, currentCategory = ""; $.each(items, function (index, item) { if (item.category != currentCategory) { ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>"); currentCategory = item.category; } that._renderItemData(ul, item); }); } }); $(function () { $("#search").catcomplete({ delay: 0, source: '@Url.Action("AutoComplete", "Search")' }); }); </script> 

Answer 1

这是需要自动完成的任何人的答案：

• 最小长度（查找minChars）
• 源绑定（列表）（查找源：'@ Url.Action ...）
• 分为几类（查找“ custom.catcomplete”）
• “搜索全部”添加到自动完成列表的底部。（查找$（'。ui-autocomplete'）。append）

HTML：

<label for="search">Search: </label>
<input id="search">

JS：

<script>
$.widget("custom.catcomplete", $.ui.autocomplete, {

    _renderMenu: function (ul, items)
    {
        var that = this,
        currentCategory = "";
        $.each(items, function (index, item)
        {
            if (item.category != currentCategory)
            {
                ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
                currentCategory = item.category;
            }
            that._renderItemData(ul, item);
        });
    }

 });
</script>

<script>
$(function () {
    $("#search").catcomplete({
        delay: 0,
        minChars: 3,
        source: '@Url.Action("AutoComplete", "Search")',

        open: function (event, ul) {
            $('.ui-autocomplete').append('<li><b><a href="javascript:alert(\'redirecting...\')">See All Result</b></a></li>'); //See all results
     },

     focus: function (event, ul) {
       $( "#search" ).val( ui.item.value );
       return false;
     },

   select: function (event, ul) {
       $("#search").val(ul.item.value);
          return false;
      }

    });
});
</script>