jqueryオートコンプリートプラグインを使用する場合、ユーザーがリスト内のアイテムを選択せず、代わりに有効な値を入力してタブで移動する場合はどうしますか？
たとえば、オートコンプリートリストに次のものが含まれている場合：
Cat
Dog
Fish
そして、ユーザーは「」と入力しますが、オートコンプリートのドロップダウンリストからcat選択せず、代わりにタブで移動します。Catリストからアイテムを選択しなかったため、オートコンプリートの選択イベントは発生せず、それに応答する機会が失われます。
$('#Animal').autocomplete({
source: url,
minlength: 1,
select: function (event, ui) {
$("#Animal").val(ui.item.value);
changeUsersAnimal(ui.item.id);
}
});
このケースをどのように処理しますか？
あなたはおそらくスコットゴンザレスのautoSelect拡張機能を探しています。この拡張機能をページに含めるだけでselect、ユーザーが有効な値を入力した場合にイベントを発生させることができ、ユーザー側で変更を加える必要はありません。
/*
* jQuery UI Autocomplete Auto Select Extension
*
* Copyright 2010, Scott González (http://scottgonzalez.com)
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* http://github.com/scottgonzalez/jquery-ui-extensions
*/
(function( $ ) {
$.ui.autocomplete.prototype.options.autoSelect = true;
$( ".ui-autocomplete-input" ).live( "blur", function( event ) {
var autocomplete = $( this ).data( "autocomplete" );
if ( !autocomplete.options.autoSelect || autocomplete.selectedItem ) { return; }
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" );
autocomplete.widget().children( ".ui-menu-item" ).each(function() {
var item = $( this ).data( "item.autocomplete" );
if ( matcher.test( item.label || item.value || item ) ) {
autocomplete.selectedItem = item;
return false;
}
});
if ( autocomplete.selectedItem ) {
autocomplete._trigger( "select", event, { item: autocomplete.selectedItem } );
}
});
}( jQuery ));
拡張機能を使用した例を次に示します：http ：//jsfiddle.net/vFWUt/226/
jQueryバージョン>=1.8.11では、autoFocusオプションをtrueに設定して使用します
$( ".selector" ).autocomplete({ autoFocus: true });
これには、リストの最初の項目を自動的に選択するという追加の利点があり、ユーザーはすべての名前を入力しなくても、EnterキーまたはTabキーを押すだけで項目を選択できます。
onchangeのカスタムイベントを追加します
$('#Animal').change(function(){
var selectedValue = this.value;
// Do what you want here:
...
});
changeまたは、ウィジェットの組み込みイベントを使用します。
$('#Animal').autocomplete({
source: url,
minlength: 1,
select: function (event, ui) {
$("#Animal").val(ui.item.value);
changeUsersAnimal(ui.item.id);
}
change: function(event, ui) { // <=======
// ...
// ...
}
});
jQuery UI 1.9.2の場合、AndrewWhitakerの回答でScottGonzálezのautoSelect拡張機能を少し変更する必要がありました。
var item = $( this ).data( "item.autocomplete" );
することが
var item = $( this ).data( "uiAutocompleteItem" );
そしてそれは完全に機能します。
このように使用できます
$("#inputbox").autocomplete({
source : reuesturl,
minLength : 1,
select : function(event, ui) {
$("#inputbox").attr('rel',ui.item.label);
},
open : function() {
$("#inputbox").attr('rel', 0);
},
close : function() {
if ($("#inputbox").attr('rel')=='0')
$("#inputbox").val('');
}
});
スコットゴンザレスのautoSelect拡張機能を以下のようjQuery UI - v1.11.0に少し変更する必要がありました。
/*
* jQuery UI Autocomplete Auto Select Extension
*
* Copyright 2010, Scott González (http://scottgonzalez.com)
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* http://github.com/scottgonzalez/jquery-ui-extensions
*/
$().ready(function () {
$.ui.autocomplete.prototype.options.autoSelect = true;
$(".ui-autocomplete-input").change(function (event) {
var autocomplete = $(this).data("uiAutocomplete");
if (!autocomplete.options.autoSelect || autocomplete.selectedItem) { return; }
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i");
autocomplete.widget().children(".ui-menu-item").each(function () {
var item = $(this).data("uiAutocompleteItem");
if (matcher.test(item.label || item.value || item)) {
autocomplete.selectedItem = item;
return false;
}
});
if (autocomplete.selectedItem) {
autocomplete._trigger("select", event, { item: autocomplete.selectedItem });
}
});
});
autoSelect: trueそして、私のオートコンプリート定義に拡張オートコンプリートオプションを適用する必要がありました。
私はこれらの答えから少しコードを取りました。
誰かが興味を持った場合に備えて、これが私のオートコンプリートの定義です。
$("your selector").autocomplete({
// Below filter looks for the values that start with the passed in string
source: function (request, response) {
var matches = $.map(yourSourceArray, function (acItem) {
if (acItem.toUpperCase().indexOf(request.term.toUpperCase()) === 0) {
return acItem;
}
});
response(matches);
},
// one can directly pass the source array instead like,
// source: yourSourceArray
autoSelect: true,
autoFocus: true,
minLength: 3,
change: function (event, ui) {
if (ui.item) {
// do whatever you want to when the item is found
}
else {
// do whatever you want to when the item is not found
}
}
})
次のコードは、jquery ui 1.10.3バージョンで動作するようにScottの拡張機能を少し調整したものです。以下のコードは、1.10.3バージョンのみでテストしました。
(function($) {
$.ui.autocomplete.prototype.options.autoSelect = true;
$( ".ui-autocomplete-input" ).live( "blur", function( event ) {
var autocomplete = $( this ).data( "ui-autocomplete" );
if ( ! autocomplete.options.autoSelect || autocomplete.selectedItem ) { return; }
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" );
autocomplete.widget().children( ".ui-menu-item" ).each(function() {
var item = $( this ).data( "ui-autocomplete-item" );
if ( matcher.test( item.label || item.value || item ) ) {
autocomplete.selectedItem = item;
return false;
}
});
if ( autocomplete.selectedItem ) {
autocomplete._trigger( "select", event, { item: autocomplete.selectedItem } );
}
});
}(jQuery));
もう1つの簡単なトリックは、を使用すること.autocomplete({ focus: and change: })です。focus要素データ属性にデータを入れるとき、それを取るchangeとき：
return $(element).autocomplete({
source: get_db_cities,
select: function (event, ui) {
$(this).attr('tz',ui.item.tz);
},
autoFocus: true,
focus: function (event, ui) {
$(this).attr('tz',ui.item.tz);
$(this).attr('label',ui.item.label); // put data in attribute
},
change: function () {
$(this).val($(this).attr('label')); // take from attribute and insert as value
}
});
このコードは一度だけ自動選択します。その後、他のすべては何もしません。何か案は？
編集：私はこの行をコメントアウトしました、そしてそれは今うまくいきます。理由はわかりません。
if ( !autocomplete.options.autoSelect || autocomplete.selectedItem ) { return; }
jquery1.9.1とjquery-ui1.10.3を使用しているページでこの関数に問題がありました。スコットゴンザレスのコードとここでの提案と数時間のスラッシングに基づいて、私は次のことを思いついた。ユーザーがオートコンプリートによって提案された値の1つのみを入力できるソリューションが必要でしたが、ユーザーがドロップダウンから選択せずに許可された値の1つを入力するだけの場合を許可したかったことに注意してください。
/*
* jQuery UI Autocomplete Auto Select Extension
*
* v 1.10
* Jomo Frodo (jomofrodo@gmail.com)
*
* This version requires an autoSelect parameter to be set on the autocomplete widget
*
* e.g.,
* $("#autoCompleteID").autocomplete({
source:url,
minLength:1,
autoSelect: true
});
*
* Based on an extension by Scott González (http://scottgonzalez.com)
* http://blog.jqueryui.com/2010/08/extensible-autocomplete/
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* http://github.com/scottgonzalez/jquery-ui-extensions
*/
$(window).load(
function() {
//$.ui.autocomplete.prototype.options.autoSelect = true;
// Doesn't appear to work in ui 1.10.3
// Must set the 'autoSelect' param on the autocomplete widget to get this to work.
$(".ui-autocomplete-input").bind('autocompleteresponse',
function(event, ui) {
$(this).data('menuItems', ui.content);
});
$(".ui-autocomplete-input").on(
"blur",
null,
function(event) {
var autocomplete = $(this).data("uiAutocomplete");
if (!autocomplete.options.autoSelect
|| autocomplete.selectedItem) {
return;
}
var matcher = new RegExp("^"
+ $.ui.autocomplete.escapeRegex($(this).val())
+ "$", "i");
var menuItems = $(this).data('menuItems');
for (idx in menuItems) {
var item = menuItems[idx];
if (matcher.test(item.value)) {
autocomplete.selectedItem = item;
break;
// return false;
}
}
if (autocomplete.selectedItem) {
autocomplete._trigger("select", event, {
item : autocomplete.selectedItem
});
} else {
this.value = '';
}
});
});
使用するautoFocus: true
$('#Animal').autocomplete({
source: url,
**autoFocus: true,**
minlength: 1,
select: function (event, ui) {
$("#Animal").val(ui.item.value);
changeUsersAnimal(ui.item.id);
}
});
ScottGonzalezのコードをJquery-UI1.12で動作するように更新しました
(function($) {
$.ui.autocomplete.prototype.options.autoSelect = true;
$('body').on('blur', '.ui-autocomplete-input', function(event) {
var autocomplete = $(this).data('ui-autocomplete');
if (!autocomplete.options.autoSelect || autocomplete.selectedItem) { return; }
var matcher = new RegExp($.ui.autocomplete.escapeRegex($(this).val()), 'i');
autocomplete.widget().children('.ui-menu-item').each(function(index, item) {
var item = $( this ).data('uiAutocompleteItem');
if (matcher.test(item.label || item.value || item)) {
autocomplete.selectedItem = item;
return false;
}
});
if (autocomplete.selectedItem) {
autocomplete
._trigger('select', event, {item: autocomplete.selectedItem});
}
});
}(jQuery));
私はこれらすべての応答を試しましたが、導入された値がリストにない場合、最終的な解決策はselectを空にすることでした。
$( "#input" ).autocomplete({
source: source,
minLength: 0,
change: function(event, ui) {
if(!ui.item) {
$(this).val("")
}
}
}).focus(function(){
$(this).data("uiAutocomplete").search($(this).val());
});