在一個頁面上的多個jQuery自動完成實例

我想在每個頁面上以不同方式爲jQuery的自動完成插件的每個實例進行樣式設置。除了我無法弄清楚如何爲每個實例設置不同的樣式。我似乎無法將ac_ *樣式封裝在div中，以便從CSS中識別它們。我所做的每一個改變都會影響到兩者有任何想法嗎？在一個頁面上的多個jQuery自動完成實例

謝謝。

來源

2010-01-28 ensnare

我想你會發現，你的問題是自動完成的下拉列表下不放置你的佔位符......例子裏面：

<div class="differentStyle"> 
    <input type="text" class="autocomplete"> 
</div>

當結果回來時，一個新的div被添加到頁面以顯示結果 - 但不在「differentStyle」分區中。它只是被添加到DOM的末尾。例如：

<div class="differentStyle"> 
    <input type="text" class="autocomplete"> 
</div> 

... 
<div class="ac_results">I get added by jQuery Autocomplete!</div> 
</body>

閱讀該文檔，我要說的是，它將使覆蓋風格兩個自動完成框在同一頁上不可能：

http://docs.jquery.com/Plugins/Autocomplete

來源

2010-01-28 08:45:57 Fenton

感謝您的研究。是的，這很令人沮喪。或許有另一種解決方案來做到這一點？謝謝。 – ensnare 2010-01-28 08:52:17

正在尋找別的東西當我碰到這個帖子時... 我設法做到這一點，通過捕獲下面的自動完成事件，並添加我自己的類到外部的自動完成輸出。然後根據需要使用CSS來格式化元素。希望這有助於某人。

$input.autocomplete({ 
      focus : function(event, ui) { 
       $(".forms-search-result").parents("ul").addClass("myClass"); 
       return false; 
      }, 
      open : function(event, ui) { 
       $(".forms-search-result").parents("ul").addClass("myClass"); 
      },

實施例的CSS：

.myClass a.ui-corner-all { font-weight:bold; }

同樣如我的JSON結果部分，我簡單回傳（從我的JAVA AJAX動作）的HTML殼內嵌有作爲實際部分的結果JSON「結果」。這樣我可以在每個結果周圍創建詳細的HTML，然後使用上面的方法按照我想要的方式對它們進行格式化。

來源

2010-07-28 18:36:47

http://api.jqueryui.com/autocomplete/#method-widget

添加如下內容：

selector.autocomplete("widget").addClass('yourclass');

來源

2010-10-08 07:32:00 Mario

這是正確的鏈接：http://api.jqueryui.com/autocomplete/#method-widget – stofl 2012-11-27 16:59:06

您可以重寫_renderMenu方法。以http://jqueryui.com/demos/autocomplete/#combobox爲例。

selector.data("autocomplete")._renderMenu=function(ul, items){ 
//do something here.. 
}

來源

2011-02-11 12:57:55 user613051

我剛剛發現，如果您使用jQuery UI 1.8，您可以輕鬆獲取UL容器。搶UI容器1.8，您只需添加以下到您的開啓方式：

var $myAcInput = $("#my-acomplete-input"); 

... 
$myAcInput.autocomplete({ 
    open : function(event, ui) { 
    // Grab the widget that just opened: 
    var $resultsContainer = $formsInput.autocomplete("widget"); 
    // Add a custom rendering class and use tht to style your subelements 
    $resultsContainer.addClass("my-custom-results-container-class");    
    // Position the container wherever you want: 
    $resultsContainer.position({at: "center bottom", 
           my:"center top", 
           collision: "fit", 
           of: "#my-acomplete-input"});    
    } 
    source : etc etc etc 
});

來源

2011-03-24 16:47:20

解決方案很簡單：

$("#target-input").autocomplete({ 
    open:function(event, ui) { 
     $('.ui-autocomplete.ui-menu').addClass('yourClass'); 
    }, 
    close:function(event, ui) { 
     $('.ui-autocomplete.ui-menu').removeClass('yourClass'); 
    } 
});

你可以把任何代碼類.yourClass

來源

2011-08-05 18:10:50 PayteR

這不起作用，它會將該類添加到頁面上的所有自動完成菜單。 – 2012-08-02 01:12:12

使用appendTo選項可將自動填充列表放置在某個自定義容器中，而不是body。然後你可以設計它。例如：

JS：

$('#suggestions').autocomplete({source: get_suggestions, appendTo: '#my-suggestions'})

HTML：

<input type="text" id="suggestions"> 
<div id="my-suggestions"></div>

CSS：

#my-suggestions { 
    position: absolute; 
} 

#my-suggestions .ui-autocomplete { 
    foo: bar; 
}

來源

2011-11-01 14:16:36 Valentin

這是唯一可用的解決方案，允許您使用不同的css樣式不同的自動填充。其餘這些答覆將影響所有這些。 – 2012-08-02 01:17:10

完美的解決方案 – karancan 2012-08-16 19:21:25

在較新版本「appendTo」加入，讓您選擇一個父元素建議列表。您可以爲您的列表創建不同的父母（帶有in或class）。

來源

2012-09-24 16:15:42 user845767

當我遇到這個問題時，我發現，jquery-ui爲每個實例提供了一個唯一的id，即＃ui-id-1，＃ui-id-2，其中dom中的第一個自動完成獲取數字1 ，第二個數字2等等。因此，如果已知自動完成的順序，則可以將不同的樣式應用於不同的ID。

來源

2013-08-04 18:26:20 irruputuncu

在一個頁面上的多個jQuery自動完成實例

回答

相關問題