jQuery UI Autocompleteを実装していますが、値の入力を許可するのではなく、返されるsuggested resultsからの選択のみを許可する方法があるかどうか疑問に思っていますテキストボックス。
このサイトで使用されているタグ付けシステムによく似たタグ付けシステムにこれを使用しているため、オートコンプリートプラグインに返される事前入力リストからユーザーがタグを選択できるようにするだけです。
Selectedが定義されていないという同じ問題がありました。安全のために回避策を取り、toLowerCase
関数を追加しました。
$('#' + specificInput).autocomplete({
create: function () {
$(this).data('ui-autocomplete')._renderItem = function (ul, item) {
$(ul).addClass('for_' + specificInput); //usefull for multiple autocomplete fields
return $('<li data-id = "' + item.id + '">' + item.value + '</li>').appendTo(ul);
};
},
change:
function( event, ui ){
var selfInput = $(this); //stores the input field
if ( !ui.item ) {
var writtenItem = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val().toLowerCase()) + "$", "i"), valid = false;
$('ul.for_' + specificInput).children("li").each(function() {
if($(this).text().toLowerCase().match(writtenItem)) {
this.selected = valid = true;
selfInput.val($(this).text()); // shows the item's name from the autocomplete
selfInput.next('span').text('(Existing)');
selfInput.data('id', $(this).data('id'));
return false;
}
});
if (!valid) {
selfInput.next('span').text('(New)');
selfInput.data('id', -1);
}
}
}
これも使用できます:
change: function(event,ui){
$(this).val((ui.item ? ui.item.id : ""));
}
私がこれまでに見た唯一の欠点は、ユーザーが受け入れ可能な項目の完全な値を入力した場合でも、テキストフィールドからフォーカスを移動すると値が削除され、再度実行する必要があることです。値を入力できる唯一の方法は、リストから値を選択することです。
それがあなたにとって重要かどうかわからない。
http://jsfiddle.net/pxfunc/j3AN7/
var validOptions = ["Bold", "Normal", "Default", "100", "200"]
previousValue = "";
$('#ac').autocomplete({
autoFocus: true,
source: validOptions
}).keyup(function() {
var isValid = false;
for (i in validOptions) {
if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) {
isValid = true;
}
}
if (!isValid) {
this.value = previousValue
} else {
previousValue = this.value;
}
});
私の場合はコードに変更するだけで動作します
selectFirst: true,
change: function (event, ui) {
if (ui.item == null){
//here is null if entered value is not match in suggestion list
$(this).val((ui.item ? ui.item.id : ""));
}
}
あなたが試すことができます
これは私が和解のリストでそれをした方法です:
$("#settlement").autocomplete({
source:settlements,
change: function( event, ui ) {
val = $(this).val();
exists = $.inArray(val,settlements);
if (exists<0) {
$(this).val("");
return false;
}
}
});
これはそこにいるあなたの何人かに役立つでしょう:
$('#INPUT_ID').autocomplete({
source: function (request, response) {
$.ajax({
type: 'POST',
contentType: 'application/json; charset=utf-8',
url: autocompleteURL,
data: "{'data':'" + $('INPUT_ID').val() + "'}",
dataType: 'json',
success: function (data) {
response(data.d);
},
error: function (data) {
console.log('No match.')
}
});
},
change: function (event, ui) {
var opt = $(this).val();
$.ajax({
type: 'POST',
contentType: 'application/json; charset=utf-8',
url: autocompleteURL,
data: "{'empName':'" + name + "'}",
dataType: 'json',
success: function (data) {
if (data.d.length == 0) {
$('#INPUT_ID').val('');
alert('Option must be selected from the list.');
} else if (data.d[0] != opt) {
$('#INPUT_ID').val('');
alert('Option must be selected from the list.');
}
},
error: function (data) {
$(this).val('');
console.log('Error retrieving options.');
}
});
}
});
私はdrupal 7.38であり、オートコンプリートで選択ボックスからの入力のみを許可するには、jsがそれを必要としないポイントでユーザー入力を削除するだけです-これはケース、検索結果がすぐに提案ポップアップに届くとすぐに設定を保存できます:
**this.input.value = ''**
autocomplete.jsからの抜粋で以下を参照してください...だから、Drupal.jsAC.prototype.foundオブジェクト全体をカスタムモジュールにコピーし、目的のフォームに追加しました。
$form['#attached']['js'][] = array(
'type' => 'file',
'data' => 'sites/all/modules/<modulname>_autocomplete.js',
);
そして、この単一行によって変更されたdrupalの元のmisc/autocomplete.jsからの抜粋です...
Drupal.jsAC.prototype.found = function (matches) {
// If no value in the textfield, do not show the popup.
if (!this.input.value.length) {
return false;
}
// === just added one single line below ===
this.input.value = '';
// Prepare matches.
=カット。 。 。 。 。 。