jQuery UI自动完成:仅允许从建议列表中选择值

Question

我正在实现jQuery UI Autocomplete,我想知道是否有任何方法只允许从返回的建议结果中进行选择,而不是允许将任何值输入到文本框中.

我将此用于标记系统,就像在此站点上使用的那样,因此我只想允许用户从预先填充的列表中选择返回到自动完成插件的标签.

Answer 1

你也可以用这个:

change: function(event,ui){
  $(this).val((ui.item ? ui.item.id : ""));
}

我看到的唯一缺点是,即使用户输入了可接受项目的完整值,当他们从文本字段移动焦点时,它将删除该值,他们将不得不再次执行此操作.他们能够输入值的唯一方法是从列表中选择它.

不知道这对你是否重要.

Answer 2

选择未定义时,我遇到了同样的问题.得到了解决方法并添加了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); 
        }
    }
}

Answer 3

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;
    }
});

Answer 4

这就是我用定居点清单做到的方式:

 $("#settlement").autocomplete({
  source:settlements,
  change: function( event, ui ) {
  val = $(this).val();
  exists = $.inArray(val,settlements);
  if (exists<0) {
    $(this).val("");
    return false;
  }
 }
});

Answer 5

我只是在我的情况下修改代码并且它正在工作

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 : ""));
        }
    }

你可以试试