將“全部顯示”添加到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>