javascript - 将 "Show All' 添加到 Jquery 自定义自动完成列表的底部

Question

如何在具有类别的自动完成底部创建链接？ Ly MVC 应用程序使用 jQuery 的自动完成和 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)
• 源绑定(bind)(列表)(查找源:'@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>