jQuery UIライブラリのオートコンプリートコンボボックスを使用して、ドロップダウンも受け入れるいくつかのテキストフィールド(基本的にはハイブリッドテキスト/ドロップダウン入力)を作成しています。ドロップダウン配列の項目だけでなく、フリーテキスト入力も受け入れるようにカスタマイズしました。
ユーザーがドロップダウンからアイテムを選択したら、入力に基づいてフォームの残りの部分にデータを入力する関数をトリガーしたいと思います。ユーザーが手動で値を入力したときにこの関数がトリガーされないようにします。ドロップダウンからアイテムを選択するユーザーにイベントを具体的にバインドする方法はわかりません。
これがフィドルです:http://jsfiddle.net/AhDHk/
HTML:
<input type="text" name="realtor-name" id="lp-realtor-name" value="" class="text ui-widget-content ui-corner-all" />
JS:
// adds the dropdown, dropArray is the list of items for the dropdown, id is the ID of the html input.
function textDropdown(dropArray, id) {
var $input = $(id).autocomplete({
source: dropArray, // this is an array fetched with AJAX of all the items for the dropdown
minLength: 0
}).addClass("ui-widget ui-widget-content ui-corner-left");
$("<button type='button'> </button>")
.attr("tabIndex", -1)
.attr("title", "Show All Items")
.insertAfter($input)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass("ui-corner-all")
.addClass("ui-corner-right ui-button-icon lp-drop-button")
.click(function() {
// close if already visible
if ($input.autocomplete("widget").is(":visible")) {
$input.autocomplete( "close" );
return;
}
$(this).blur();
$input.autocomplete("search", "" );
$input.focus();
});
$("form").submit(function(e) {
event.preventDefault ? event.preventDefault() : event.returnValue = false;
alert($(this).serialize());
});
}
これを処理する方法は次のとおりです。
var $input = $(id).autocomplete({
source: dropArray, // this is an array fetched with AJAX of all the items for the dropdown
minLength: 0,
select: function(event, ui) { alert('test');}
}).addClass("ui-widget ui-widget-content ui-corner-left");
重複の可能性:jQuery UI Autocompleteselect
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加