次のコードを使用して、ユーザーがフォームに入力するときにオートコンプリート オプションの 1 つだけを選択できるようにすると、完全に機能します。
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;
}
});
ただし、以下のように配列をオンザフライで作成するために ajax を使用しているため、上記のようにvalidOptionsなどの配列の名前はありません。
質問上記の「方法」を以下の方法で使用するにはどうすればよいですか
$('#ac').autocomplete({
autoFocus: true,
source: "/pages/includes/getAgent.php",
select: function( event, ui ) {
$('#autoc1').val(ui.item.agent_name);
$('#comm').val(ui.item.commission_percent);
return false;
}
}).keyup(function() {
var isValid = false;
// here is the issue, the new data is not called validOptions
for (i in validOptions) {
if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) {
isValid = true;
}
}
if (!isValid) {
this.value = previousValue
} else {
previousValue = this.value;
}
}).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.agent_name + "</a>" )
.appendTo( ul )
};