我正在实现jQuery UI 自动完成，并且想知道是否有任何方法只允许从返回的建议结果中进行选择，而不是允许将任何值输入到文本框中。
我将它用于标记系统，很像本网站上使用的标记系统，因此我只想允许用户从返回到自动完成插件的预填充列表中选择标记。
jQuery UI 自动完成：只允许从建议列表中选择值
IT技术
javascript
jquery
ajax
jquery-ui
autocomplete
2021-02-28 19:48:14
6个回答
你也可以使用这个：
change: function(event,ui){
$(this).val((ui.item ? ui.item.id : ""));
}
我看到的唯一缺点是，即使用户输入可接受项目的完整值，当他们从文本字段移动焦点时，它将删除该值，他们将不得不再次执行此操作。他们能够输入值的唯一方法是从列表中选择它。
不知道这对你来说是否重要。
我遇到了同样的问题，选择未定义。为它找到了解决方法并添加了该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);
}
}
}
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;
}
});
这就是我使用定居点列表的方式：
$("#settlement").autocomplete({
source:settlements,
change: function( event, ui ) {
val = $(this).val();
exists = $.inArray(val,settlements);
if (exists<0) {
$(this).val("");
return false;
}
}
});
我只是在我的情况下修改代码并且它正在工作
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 : ""));
}
}
你可以试试