可能在搜索時顯示jQuery自動完成的下拉菜單嗎？

我希望能夠在的自動完成下拉菜單中顯示加載圖標，同時搜索正在進行。我怎麼能這樣做呢？可能在搜索時顯示jQuery自動完成的下拉菜單嗎？

當前代碼：

$("#searchbox").autocomplete({ search: function(event, ui) { $('ul.ui-autocomplete').append("<li id='loading_icon'></li>"); $('ul.ui-autocomplete').show(); }, open: function(event, ui) { $('#loading_icon').hide(); } ...

但會發生什麼是圖標顯示在瀏覽器頁面的最左上方。該位置的計算還沒有發生。我可以通過某種方式撥打電話來計算自動填充下拉框的位置嗎？

謝謝！

來源

2012-08-14 Goalie

這是可行的，但您必須將source選項轉換爲函數並自己發出AJAX請求。例如：

重寫_renderItem最後一位就是這麼做的，這樣我們就可以取消裝載物品的點擊事件（並防止它被放置在input）。

例子：http://jsfiddle.net/m3MGH/

更新，每下面的評論：

要在div顯示加載圖片，你可以做這樣的事情（只是改變了_renderItem功能）：

.data("autocomplete")._renderItem = function(ul, item) { 
    var $li = $("<li></li>"); 

    if (item.loading) { 
     $li.append("<div>Loading<img src='my_loading_img' /></div>").appendTo(ul);     
    } else { 
     $li.data("item.autocomplete", item).append("<a>" + item.label + "</a>").appendTo(ul); 
    } 

    return $li; 
};

你可能不得不使用一個小小的CSS來讓事情正確定位，但這應該讓你開始。

來源

2012-08-14 22:43:21

而不是使用標籤「加載....」是否有可能把圖像放在一個div？如果是這樣，我該如何去做呢？ – Goalie 2012-08-15 02:45:46

@Goalie：查看更新後的答案。希望有所幫助！ – 2012-08-15 13:05:52

這對我而言最初不起作用。我不得不做的工作是改變_renderItemData類而不是_renderItem類，並返回$ li對象。

element.autocomplete({ 
       ... 
    }).data("autocomplete")._renderItemData = function (ul, item) { 
      var $li = $("<li></li>") 
      .data("item.autocomplete", item) 
      .append("<a>" + item.label + "</a>") 
      .appendTo(ul); 

         /* Make sure nothing happens when you click "Loading" */ 
      if (item.loading) { 
       $li.find("a").on("click", false); 
      } 
      return $li; 
     };

來源

2013-01-02 16:32:29

我覺得

if (item.loading) { 
    $li.find("a").on("click", false); 
}

是不夠的，因爲在按Tab鍵jQuery的自動完成反應，並以同樣的方式作爲對鼠標點擊輸入按鈕。同時自動完成在向上和向下按鈕上作出反應。

任何人都可以提出解決方案來解決這個問題嗎？

來源

2013-08-20 13:32:59

可能在搜索時顯示jQuery自動完成的下拉菜單嗎？

回答

相關問題