顯示不同的面板取決於Autocompleter輸出

Question

我有一個只包含一個jQuery自動完成文本框的頁面。
如果用戶執行的搜索和選擇從下拉列表中的項目，一個網格在autocompleter下示出應顯示順利包含所選擇的項目的數據。
在另一方面，如果沒有數據的情況下，面板應該出現順利的autocompleter下包含了兩個按鈕和文本。

就如何實現這一目標的任何提示的高度讚賞。

Answer 1

這樣做的最難的部分是確定如果沒有結果自動填充的結果集的一部分返回，但有are ways to do that。如果您使用的是遠程或本地數據源，或者您的數據看起來像什麼，那麼您還沒有提及，但這應該讓您知道該怎麼做。

1. 將函數引用傳遞給source參數。在該函數內部，如果沒有返回結果，請做一些特殊的事情。另外，您也可以在在上面的回答中列出的自定義事件處理程序是這樣寫代碼：

   source: function(request, response) { 
       var result = $.ui.autocomplete.filter(src, request.term); 
       if (!result.length) { 
        $("#container") 
         .hide() 
         .html("<strong>" + request.term + "</strong> Not Found.") 
         .fadeIn(3000); 
   
       } 
       response(result); 
   }, 
   

   在這裏，我只是在一些內容與<strong>標籤（我知道你想要的按鈕和其他一些褪色東西，但這個想法是一樣的）。

2. 上選擇定義爲select事件的事件處理程序，並顯示不同的HTML：

   select: function(event, ui) { 
       $("#container") 
        .hide() 
        .html("<table><tr><td>" + ui.item.value + "</td><td><a href='" + ui.item.info + "'>" + ui.item.info + "</a></td></tr></table>") 
        .fadeIn(3000); 
   } 
   

   這個例子只是假定你有一個在自動完成提供每個項目稱爲info財產，並提請一個簡單的表。

例子：http://jsfiddle.net/andrewwhitaker/wBePy/

---

注：

• 雖然這不是直觀的，實際上你可以有你想每個自動完成響應內部的任何性質項目。您可以使用ui.item.propertyName通過事件處理程序中的名稱訪問這些屬性。
• 如果要附加的內容海量，我可能會建議使用某種客戶端模板，如jQuery.tmpl
• 您可以使用fadeIn，show，或animate順利追加內容。