如何觸發我使用這個自動完成庫中的多個遠程自動完成的jQuery UI

Question

的自動搜索選項：http://jqueryui.com/demos/autocomplete/#multiple-remote

如果有人知道如何不鍵入文本框中輸入任何內容觸發自動搜索我想知道。即如果我們想要在按鈕單擊事件上顯示列表。 「搜索」方法似乎是這樣做的。但我無法讓它工作。

請注意，自動建議的數據來自網絡服務。如果用戶在文本框中輸入內容，建議會相應地改變。即鍵入的數據進入服務並帶回建議。 輸入是「名稱，位置」形式。因此，輸入的不同部分會顯示不同類型的建議。

代碼：

UI：

<div class="ui-widget"> 
    <label for="birds">Birds: </label> 
    <input id="birds" size="50" /> 
</div> 

腳本：

<script> 
    $(function() { 
     function split(val) { 
      return val.split(/,\s*/); 
     } 
     function extractLast(term) { 
      return split(term).pop(); 
     } 

     $("#birds")    
      .bind("keydown", function(event) { 
       if (event.keyCode === $.ui.keyCode.TAB && 
         $(this).data("autocomplete").menu.active) { 
        event.preventDefault(); 
       } 
      }) 
      .autocomplete({ 
       source: function(request, response) { 
        $.getJSON("search.php", { 
         term: extractLast(request.term) 
        }, response); 
       }, 
       search: function() { 
        var term = extractLast(this.value); 
        if (term.length < 2) { 
         return false; 
        } 
       }, 
       focus: function() { 
        return false; 
       }, 
       select: function(event, ui) { 
        var terms = split(this.value); 
        terms.pop(); 
        terms.push(ui.item.value); 
        terms.push(""); 
        this.value = terms.join(", "); 
        return false; 
       } 
      }); 
    }); 
    </script> 

如果我輸入任何東西把它發送到search.php中的請求。 我試着將邏輯「term.length < 2」更改爲「term.length < = 0」。這工作，但我必須按空格鍵。然後在文本框中放置一個空白空間並將請求發送到服務器。但我不想在那裏輸入任何內容。 希望有所幫助。

Answer 1

如果您想在單擊按鈕時觸發搜索，則必須調用搜索方法。如果你想顯示所有選項，調用設置爲空字符串值搜索和設置自動完成構件接受的minLength：0

，這樣，代碼：

UI

<div class="ui-widget"> 
    <label for="birds">Birds: </label> 
    <input id="birds" size="50" /> 
    <input type="button" id="search-trigger" value="Trigger" /> 
</div> 

腳本

<script type="text/javascript"> 
$(function() { 
    function split(val) { 
     return val.split(/,\s*/); 
    } 
    function extractLast(term) { 
     return split(term).pop(); 
    } 

    // Button listener that triggs the search event 
    $("#search-trigger").click(function(){ 
     var searchTerm = $("#birds").val(); 
     $("#birds").autocomplete("search" , searchTerm); 
    }); 


    $("#birds")    
     .bind("keydown", function(event) { 
      if (event.keyCode === $.ui.keyCode.TAB && 
       $(this).data("autocomplete").menu.active) { 
       event.preventDefault(); 
      } 
     }) 
     .autocomplete({ 
      source: ["lorem", "ipsum", "dolor"], 
       /* Commented this out to use dummy data above 
          function(request, response) { 
       $.getJSON("search.php", { 
        term: extractLast(request.term) 
       }, response); 
      },*/ 
      search: function() { 
       var term = extractLast(this.value); 

          /* What is this check for? 
       if (term.length < 2) { 
        return false; 
       }*/ 
      }, 
      focus: function() { 
       return false; 
      }, 
      select: function(event, ui) { 
       var terms = split(this.value); 
       terms.pop(); 
       terms.push(ui.item.value); 
       terms.push(""); 
       this.value = terms.join(", "); 
       return false; 
      }, 
      //Added for "show all" support 
      minLength: 0 
     }); 
}); 
</script> 

這是您要查找的行爲嗎？

Ref：http://jqueryui.com/demos/autocomplete/#method-search