29

私はこのjQuery UIコンボボックスオートコンプリートコントロールをjQuery UI Webサイトからすぐに使用しています:

私の問題は、ページに複数のコンボボックスがあり、それぞれに異なる幅を持たせたいということです。

この CSS を追加することで、それらすべての幅を変更できます。

 .ui-autocomplete-input
 {
     width: 300px;
 }

しかし、そのうちの1つの幅だけを変更する方法がわかりません。

4

14 に答える 14

35

シンプルな

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

ページの最初のものを変更するために動作します（リンクされたページでFirebugで試しました）。

次のようなことができます：

$($('.ui-autocomplete-input')[N]).css('width','300px') #N is the nth box on the page

N番目のものを変更します。

特性によって特定のものを見つけるには、さまざまな方法があります。

最初の「オプション」(この例では「asp」) で検索します。

$('.ui-autocomplete-input').map(function(){if ($(this).parent().children()[1].options[0].text == 'asp'){ $(this).css('width','300px'); return false;} })

「ラベル」で検索します。

$('.ui-autocomplete-input').map(function(){if ($($(this).parent().children()[0]).text() == "Your preferred programming language: "){ $(this).css('width','300px'); return false;}})

等...

コンボボックスを見つける方法がわかっている場合は更新します。

コメントのために編集

おお、それはそれをさらに簡単にします。リンク先のサンプル ソースから、HTML は既に div でラップされています。

<div class="ui-widget" id="uniqueID">
    <label>Your preferred programming language: </label>
    <select>
        <option value="a">asp</option>
        <option value="c">c</option>
        <option value="cpp">c++</option>
        <option value="cf">coldfusion</option>
        <option value="g">groovy</option>
        <option value="h">haskell</option>
        <option value="j">java</option>
        <option value="js">javascript</option>
        <option value="p1">perl</option>
        <option value="p2">php</option>
        <option value="p3">python</option>
        <option value="r">ruby</option>
        <option value="s">scala</option>
    </select>
</div>

次に、その div に一意の ID を付けます。

$('#uniqueID > input.ui-autocomplete-input').css('width', '300px')

これにより、「ui-autocomplete-input」クラスの入力である div の子要素が選択されます。

于 2010-04-24T19:09:45.150 に答える
5

私は基本的にすぐに利用できるウィジェットの init 関数の 1 つであり、あなたが探しているものかもしれない以下を使用します。それを達成するために2つの単純な行を追加しました

$(function(){
$.widget( "ui.combobox", {
    _create: function() {
        var self = this,
        select = this.element.hide(),
        selected = select.children( ":selected" ),
        value = selected.val() ? selected.text() : "";
        var getwid = this.element.width(); // <<<<<<<<<<<< HERE
        var input = this.input = blah blah
        .insertAfter( select )
        .val( value )
        .autocomplete({
            delay: 0,
            minLength: 0,
            source: function( request, response ) {
                blah blah
            },
            blah blah
        })
        //?? .addClass( "ui-widget ui-widget-content ui-corner-left" );
        input.width(getwid); // <<<<<<<<<<<< AND HERE
        input.data( "autocomplete" )._renderItem = function( ul, item ) {
            blah blah

行var getwid etc とinput.width(getwid);に注意してください。

これは、選択オブジェクトの幅をコピーして、選択入力をオーバーレイするために作成されたコンボ ボックス (オートコンプリート コンボボックス) に適用することで解決しました。

それが役立つことを願っています。よろしく。

PS: 基になる選択リストを参照せずに固定幅を適用したいだけの場合は、追加した最初の行を無視し、2 番目の行を変更して、事前定義された配列を "this" id と比較します。

于 2012-02-22T10:17:28.823 に答える
5

JavaScript を気にしないでください。もともとやろうとしていたように、これを CSS で簡単に行うことができます。必要なのは、それぞれに一意のセレクターを追加することだけです。例えば：

HTMLは次のようになります

<div class="title">
    <label for="title">Title: </label>
    <input id="title">
</div>
<div class="tags">
    <label for="tags">Tags: </label>
    <input id="tags">
</div>

CSSは次のようになります

.ui-autocomplete-input
{ 
    width: 120px;
}
.title .ui-autocomplete-input
{ 
    width: 200px;
}
.tags .ui-autocomplete-input
{ 
    width: 600px;
}
于 2010-04-27T13:16:26.173 に答える
5

JavaScript

var $myinput = $('#myinput').autocomplete({source: ['ABC', 'BCD', 'CDE']})
$myinput.data('autocomplete').menu.element.addClass('myautocomplete');

CSS

.myautocomplete{width:300px!important;}

width上書きされるため、直接設定することはできません。ただし、min-width直接設定することはできます。

var $myinput = $('#myinput').autocomplete({source: ['ABC', 'BCD', 'CDE']})
$myinput.data('autocomplete').menu.element.css('min-width', '300px');
于 2012-01-20T10:12:43.703 に答える
5

http://jqueryui.com/demos/autocomplete/#comboboxのコードを使用していることに注意してください。

_createメソッドに、次の行を追加します。

    _create: function() {
        var self = this;
        var eleCSS = this.element[0].className; //This line

次に、少し下にスクロールして、これを見つけます：

    .addClass("ui-widget ui-widget-content ui-corner-left");

これを次のように変更します。

    .addClass("ui-widget ui-widget-content ui-corner-left "+ eleCSS);

HTML

<select class="combo-1 autocomplete">
    <option value="a">asp</option>
    <option value="c">c</option>
    <option value="cpp">c++</option>
    <option value="cf">coldfusion</option>
    <option value="g">groovy</option>
    <option value="h">haskell</option>
    <option value="j">java</option>
</select>

これで、コンボ 1 に CSS を適用できます。

<script>
    $(function() {
        $('.autocomplete').combobox();
        $('.combo-1').css('width', '50px');
    });
</script>
于 2010-04-24T21:24:37.467 に答える
3

それを行う最も簡単な方法は、open イベントをキャプチャして、そこで幅を設定することだと思います。

$("#autocompleteInput").bind("autocompleteopen", function(event, ui) {
  var width = 300;
  $(".ui-autocomplete.ui-menu").width(300);
});

一度にアクティブにできるオートコンプリート メニューは 1 つだけなので、メニュー クラスの幅を変更するだけでかまいません。

于 2010-11-10T18:01:39.303 に答える
1

クラスに一致するように、ドキュメントに実際の CSS ルールをいつでも設定できます。

.ui-autocomplete-input
{ 
    width: 300px;
}

必要な幅が事前にわかっている場合。

于 2010-04-24T19:13:19.863 に答える
0

jQuery CSS メソッドを使用するだけです。

css("width", "300px");

http://api.jquery.com/css/#css2

コンボボックスを追加した後にこれを追加できます。

コードでコンボボックスをどのように使用しますか?

于 2010-04-22T12:35:02.240 に答える
0

jQuery UIコードを少し変更すると、.autocomplete() 関数に幅を追加できます。

公式の jQuery UI オートコンプリート (私は 1.8.16 を使用しています) を使用していて、幅を手動で定義したい場合。

縮小版を使用している場合 (そうでない場合は、_resizeMenu を一致させて手動で検索します)、検索...

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

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

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

幅の値を .autocomplete({width:200}) 関数に含めることができるようになり、jQuery はそれを尊重します。そうでない場合は、デフォルトで計算されます。

于 2011-09-15T13:49:12.543 に答える
0 
$input.data('ui-autocomplete')._resizeMenu = function () {
    var ul = this.menu.element;
    ul.outerWidth(this.element.outerWidth()); 
 }

独自のウィジェット内で行う場合、次のようなことができます

        // Fix width of the menu
        this.input = <your dom element where you bind autocomplete>;
        this.input.data("ui-autocomplete")._resizeMenu = function () {
            var ul = this.menu.element;
            ul.outerWidth(this.element.outerWidth())
        }
于 2016-04-26T10:45:17.627 に答える
0

オートコンプリート コンボボックスを完全に制御し、幅を自動的に設定して、「a_mycomboID」のような ID を付与するには

この行を変更

input = $( "<input>" )

に

input = $( "<input id=a_"+select.attr('id')+" style='width:"+select.width()+"px;'>" )

これにより、幅が自動的に設定され、 などの ID が付与されa_[the id of the combo box]ます。これにより、ID を使用して動作を制御できます。

実施例

于 2012-09-26T09:45:44.480 に答える