jQueryオートコンプリートコンボボックスの幅を設定することは可能ですか？
https://stackoverflow.com/questions/2688652
-
30-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
使ってます このjQuery UIコンボボックスオートコンプリートコントロール jquery UIのWebサイトから外れています：
私の問題は、私がページに複数のコンボボックスを持っていることであり、それぞれに異なる幅を持っていることを望んでいます。
このCSSを追加することで、すべての幅を変更できます。
.ui-autocomplete-input
{
width: 300px;
}
しかし、私はそれらの1つだけで幅を変更する方法を理解することはできません。
解決
シンプルな
$('.ui-autocomplete-input').css('width','300px')
作品（リンクされたページで試してみました Firebug）ページの最初のものを変更します。
あなたは次のようなことをすることができます：
$($('.ui-autocomplete-input')[N]).css('width','300px') #N is the nth box on the page
nthを変更します。
特徴によって特定のものを見つけるために、多くの方法でそれを行うことができます。
最初の「オプション」でそれを見つけます（この例では「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入力」のクラスを含む入力であるDivの子要素を選択します。
他のヒント
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;
}
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');
私は以下を使用します。これは、基本的に容易に利用可能なウィジェット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 など input.width（getWid）;
これにより、選択したオブジェクトの幅をコピーして、コンボボックスに適用するために取り組みました（オートコンプリートコンボボックス）選択された入力をオーバーレイするために作成されます。
それが役立つことを願っています。よろしく。
PS：基礎となる選択リストを参照しない固定幅を本当に適用したい場合は、1行目を無視して2番目の行を無視して、事前定義された配列を「この」IDと比較すると思います。
コードを使用していることに注意してください http://jqueryui.com/demos/autocomplete/#combobox.
の中に _create 方法、この行を追加します：
_create: function() {
var self = this;
var eleCSS = this.element[0].className; //This line
その後、少しscrolldown、これを見つけてください：
.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>
これで、CSSをCombo-1に適用できます。
<script>
$(function() {
$('.autocomplete').combobox();
$('.combo-1').css('width', '50px');
});
</script>
それを行う最も簡単な方法は、オープンイベントをキャプチャして、そこに幅を設定することだと思います。
$("#autocompleteInput").bind("autocompleteopen", function(event, ui) {
var width = 300;
$(".ui-autocomplete.ui-menu").width(300);
});
一度にアクティブになることができるオートコンプリートメニューは1つだけなので、メニュークラスの幅を変更するだけで問題ありません。
$.widget( "custom.myAutoComplete", $.ui.autocomplete, {
options: {
resultClass: "leanSolutions",
},
_create: function()
{
this._super();
},`
_renderMenu: function(ul, items)
{
var that = this;
ul.addClass(that.options.resultClass);
$.each( items, function( index, item ) {
that._renderItemData( ul, item );
});
}
});
今、あなたはこれを行うことができます：
$('.myAutoCompleteBox').myAutoComplete(
data: ...
etc: ...
resultClass: 'myAutoCompleteBoxResultList'
);
そして、あなたはそれをスタイリングすることができます
.myAutoCompleteBoxResultList{
width: 8000px;
}
クラスに一致するように、ドキュメントに実際のCSSルールをいつでも設定することができます。
.ui-autocomplete-input
{
width: 300px;
}
それがどれだけ広いか知っているなら。
オートコンプリートコンボボックスを完全に制御し、幅を自動的に設定し、「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を使用して動作を制御できます。
jQuery CSSメソッドを使用するだけです。
css("width", "300px");
http://api.jquery.com/css/#css2
コンボボックスを追加した後、これを追加できます。
コードでコンボボックスをどのように使用しますか？
に小さな変更があります jquery ui コード.autocomplete（）関数に幅を追加できます。
公式のjQuery UI Autocompleteを使用している場合（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がそれを尊重します。そうでない場合は、デフォルトで計算します。
$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())
}
幅はいつでもプラグインによってオーバーライドされるため、幅の代わりに最大幅を設定します。
.ui-autocomplete-input
{
max-width: 300px;/* you can set by percentage too */
}
