jQuery用户界面自动完成：只允许选择的从建议名单

Question

我实现jQuery UI的自动完成，我想知道是否有什么办法只允许选择从建议结果被退回，而不是允许任何价值估值输入到文本框中。

我使用这个标签系统非常像这个网站上使用的标签系统，所以我只想让用户从预先填充的列表中选择标签返回到自动完成插件。

Answer 1

我得到了同样的问题，选择未定义。找到了解决办法，并添加了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 2

您也可以使用此：

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

我已经看到了这个唯一的缺点是，即使用户输入一个可接受项目的全部价值，当他们从移动焦点textfield它将删除该值，他们将不得不重做。他们能够输入值的唯一方法是从列表中选择它。

不知道这对你是否重要。

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

你可以试试

Answer 6

随着简单的jQuery，使用事件focusout：

例如：

$("#input").focusout(function(){ 

}); 

然后：获得与$("#input").val() 文本并检查字是否是按照该阵列。 如果不干净的输入：$("#input").val('');

Answer 7

我在Drupal的7.38和 只允许在自动完成 你只需要在点删除用户输入从选择框输入， JS那里不需要它了 - 这只要在搜索结果中的建议，弹出 到达那里，你可以savely设置是这样的， ：

**this.input.value = ''** 

见下文从autocomplete.js提取物... 所以我复制了整个Drupal.jsAC.prototype.found对象 到我的自定义模块，将其添加到所需形式 与

$form['#attached']['js'][] = array(
    'type' => 'file', 
    'data' => 'sites/all/modules/<modulname>_autocomplete.js', 
); 

下面是从Drupal的原始杂项/自动完成的提取物。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. 

= cut。 。 。 。 。 。