jQuery/UI 自动完成，但只允许输入现有的单词答案

【问题标题】：jQuery/UI Auto complete but only allow existing words to be typed injQuery/UI 自动完成，但只允许输入现有的单词
【发布时间】：2012-12-18 06:25:01
【问题描述】：

希望我的解释正确，我有一个很长的预定义项目列表（我的数据库中的产品），我希望用户能够键入并自动完成产品，但是如果该产品/单词不在列表中，我不想允许输入其他字符。因此，如果列表中不存在该输入，则自动完成理想情况下会阻止其他输入。

当前的 jQuery UI / jQuery 插件是否存在类似的东西？或者有mod吗？我希望使用这种方法来加快产品选择，但如果有人输入其他内容，则不会返回“未找到”页面。

提前谢谢你:)

【问题讨论】：

根据您的要求，您可能应该使用下拉菜单而不是自动完成框。否则，您可以在发布页面之前进行 Ajax 调用以验证该值。
问题是，如果我有 2,000 个零件，下拉菜单会太大而且太繁琐，无法“遍历”...
组合框也会自动完成（有点）。

标签： jquery jquery-ui autocomplete

【解决方案1】：

This AutoComplete plugin 有一个函数可以让您测试值以确保它在列表中。

【讨论】：

我看过这个插件，但是它并没有限制用户输入列表中的内容，我想要一些可以“阻止”额外输入的东西。否则，如果有人提交请求（针对产品），它将返回不需要的未找到，迫使用户更正或重新输入产品。
我想您可以在每次击键时调用 FindValue()。但它会非常缓慢。如果没有组合框，您需要事先将列表加载到浏览器中，这样您就不会在每次击键时都受到 Ajax 调用的影响。需要一些自定义编码。
findValue() 实际上是一个很好的解决方案，我将所有部分转储到 JS 数组中（有点粗略），然后做一个简单的 if in array 检查。我的想法来自：ajaxdaddy.com/demo-jquery-autocomplete.html

【解决方案2】：

你好也有类似的问题。 Bud 没有使用下拉菜单和/或组合框（不完全支持）我决定使用更改事件选项进行自动完成，如下所示：

jQuery('#field').autocomplete ({
  ...
  source: listOfValues,   // assuming an array like this ['val1', 'val2', val3' ... ]
  change: function (event, ui) {
     // check if entered value exists
     var entered_valid_input = false;   // false until proven true
     jQuery.each(listOfValues, function(i,v) {
       if(jQuery('#field').val() == v) {
         entered_valid_input = true;
         return false;   // stop iterating
       }

     });
     if(!entered_valid_input) {
        // blank the field
        jQuery('#field').val("");
        return;    // exit callback. No further processing
     }

  },
  ...
  // further processing if the input is valid
});

似乎对我很有效。即使它不是最优雅的解决方案。

【讨论】：