web-dev-qa-db-ja.com

JQueryオートコンプリートの結果スタイル

オートコンプリートの結果からスタイルを変更しようとしています。

私は試した：

_
// Only change the inputs
$('.ui-autocomplete-input').css('fontSize', '10px');
$('.ui-autocomplete-input').css('width','300px');

_

検索して、結果で使用されているクラスが何であるかを見つけることができなかったため、フォントサイズと幅を変更できます。

ありがとう。

使用： jQuery-UI AutoComplete

EDIT：入力からではなく、JSONからの結果からcssを変更する必要があります。投稿したコードは、結果ではなく入力のみを変更します。これが、結果リストで使用されるクラスを要求した理由です（少なくとも、それはリストだと思います）。 ffからfbを使用しようとしましたが、見つかりませんでした。しばらくお待ちください。

EDIT2：例としてjQuery UIのオートコンプリートを使用します。

jQuery-UIのオートコンプリートページを見るにはこれをチェックしてください

フロントページサンプルのテキストボックスに「Ja」と入力すると、Javaとなり、テキストボックスの下の小さなボックスにJavaScriptが[結果]として表示されます。

この小さなボックスは、CSSを変更したいものです。上記のサンプルのコードは、テキストボックスCSSのみを変更します（これはまったく必要ありません）。

私が今明確になっているかどうかはわかりません。そう願っていますが、そうでない場合はお知らせください。私の問題を示すために必要であれば、私はもっと頑張ります。

結果アイテムを含むULのクラスが必要です

[〜＃〜] solution [〜＃〜]Zikesが受け入れられた答えに関するコメントで述べたように、ここに解決策があります。 CSSファイルに_ul.ui-autocomplete.ui-menu{width:300px}_を入れるだけです。

これにより、すべての結果ボックスcssが_width:300px_になります（サンプルのように）。

結果オブジェクトがページのロード時に存在しないことを忘れていたため、$('...').css()の呼び出しによってターゲットが見つからず、ターゲットになりません。 CSSファイルに_ul.ui-autocomplete.ui-menu{width:300px}_を実際に配置して、結果が生成されてページに挿入されたときに有効になるようにする必要があります。
– Zikes

javascriptjqueryautocomplete
18
Michel Ayres

オートコンプリートウィジェットのスタイル設定に関する情報は、次の場所にあります。 http://docs.jquery.com/UI/Autocomplete#theming

フィドル

[〜＃〜] html [〜＃〜]

<input type="text" id="auto">

jQuery

$('#auto').autocomplete({'source':
    ['abc','abd','abe','abf','jkl','mno','pqr','stu','vwx','yz']
});

[〜＃〜] css [〜＃〜]

ul.ui-autocomplete.ui-menu{width:400px}

/* 
    targets the first result's <a> element, 
    remove the a at the end to target the li itself 
*/
ul.ui-autocomplete.ui-menu li:first-child a{
    color:blue;
}
20
Zikes

このcssをドキュメントの<head>（オートコンプリートJavaScriptの上）に追加することで調整できました。

以下のいくつかは他のものよりも関連性があります。これらを変更すると、影響を受けたくない他の要素に影響する場合は、オートコンプリート入力に固有にすることができます。

<style type="text/css">
 /* http://docs.jquery.com/UI/Autocomplete#theming*/
.ui-autocomplete { position: absolute; cursor: default; background:#CCC }   

/* workarounds */
html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
.ui-menu {
    list-style:none;
    padding: 2px;
    margin: 0;
    display:block;
    float: left;
}
.ui-menu .ui-menu {
    margin-top: -3px;
}
.ui-menu .ui-menu-item {
    margin:0;
    padding: 0;
    zoom: 1;
    float: left;
    clear: left;
    width: 100%;
}
.ui-menu .ui-menu-item a {
    text-decoration:none;
    display:block;
    padding:.2em .4em;
    line-height:1.5;
    zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
    font-weight: normal;
    margin: -1px;
}
</style>
14
Chris M

公式のjQuery UIオートコンプリート（1.8.16を使用）を使用していて、幅を手動で定義したい場合は、そうすることができます。

縮小版を使用している場合（そうでない場合は、_resizeMenuを照合して手動で検索します）、検索...

_resizeMenu:function(){var a=this.menu.element;a.outerWidth(Math.max(a.width("").outerWidth(),this.element.outerWidth()))}

...そしてそれを（Math.maxの前にthis.options.width ||を追加）に置き換えます...

_resizeMenu:function(){var a=this.menu.element;a.outerWidth(this.options.width||Math.max(a.width("").outerWidth(),this.element.outerWidth()))}

... .autocomplete（{width：200}）関数に幅の値を含めることができるようになり、jQueryはそれを受け入れます。そうでない場合は、デフォルトで計算されます。

3
Harry B

それで、コードを最適化するための2つのオプションがあることを知っています。

これの代わりに：

$('.ui-autocomplete-input').css('fontSize', '10px');
$('.ui-autocomplete-input').css('width','300px');

あなたはこれを行うことができます：

$('.ui-autocomplete-input').css('fontSize', '10px').css('width','300px');

または、これを行うべきです。

$('.ui-autocomplete-input').css({fontSize: '10px', width: '300px'});
2
The Muffin Man