7

jQueryのオートコンプリートプラグインの各インスタンスのスタイルをページごとに変えたいと思います。インスタンスごとに異なるスタイルを設定する方法がわからない場合を除きます。CSSからそれらを識別するためにdiv内でac_*スタイルをラップすることができないようです。私が行うすべての変更は両方に影響します。何か案は？

ありがとうございました。

4

9 に答える 9

16

オプションを使用して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-01T14:16:36.497 に答える
5

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

次のようなものを追加します。

selector.autocomplete( "widget" ).addClass('yourclass');
于 2010-10-08T07:32:00.273 に答える
2

解決策は非常に簡単です：

$( "#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-05T18:10:50.170 に答える
1

メソッドを書き直すことができます_renderMenu。例としてhttp://jqueryui.com/demos/autocomplete/#comboboxを取り上げます。

selector.data("autocomplete")._renderMenu=function(ul, items){
//do something here..
}
于 2011-02-11T12:57:55.310 に答える
1

jQuery UI 1.8を使用している場合は、ULコンテナを簡単に取得できることを発見しました。1.8でUIコンテナを取得するには、openメソッドに次を追加するだけです。

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-24T16:47:20.977 に答える
0

問題は、オートコンプリートのドロップアンダーリストがプレースホルダー内に配置されていないことだと思います...例：

<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>

ドキュメントを読むと、同じページにある2つのオートコンプリートボックスのスタイルを上書きできなくなると思います。

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

于 2010-01-28T08:45:57.133 に答える
0

この投稿に出くわしたときに何か他のものを探していました...次のオートコンプリートイベントをトラップし、オートコンプリート出力を格納するアウターに自分のクラスを追加することで、これを行うことができました。次に、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結果の一部として、実際のJSON「結果」の一部として結果が埋め込まれたHTMLシェルを（JAVA AJAXアクションから）返すだけです。そうすれば、各結果の周りに精巧なHTMLを作成し、上記の方法を使用して、希望どおりにフォーマットすることができます。

于 2010-07-28T18:36:47.103 に答える
0

新しいバージョンでは、「appendTo」が追加され、提案リストの親要素を選択できるようになりました。リストに対して（inまたはclassを使用して）異なる親を作成できます。

于 2012-09-24T16:15:42.050 に答える
0

この問題が発生したとき、jquery-uiはすべてのインスタンスに一意のIDを与えます。これは＃ui-id-1、＃ui-id-2で、domの最初のオートコンプリートは番号1、2番目の番号を取得します。 2など。したがって、オートコンプリートの順序がわかっている場合は、さまざまなスタイルをさまざまなIDに適用できます。

于 2013-08-04T18:26:20.877 に答える