如何限制用户只在jQuery中从自动填充列表中选择值？ （即用户不能输入新条目）

Question

我使用Bootstrap的打字插件来实现文本字段的自动填充功能。在后端，我通过AJAX，PHP和MySQL获得必要的匹配数据元素。

一切都对我很好。但有一个问题：我不希望用户接受除自动填充列表中出现的数据项以外的数据。换句话说，我想限制用户仅从自动填充列表中选择数据元素。他/她不应该输入除自动填充数据项列表中的条目以外的数据。

typeahead.js 已包含在内。我使用 jquery-1.9.1.min.js

我的HTML和jQuery代码如下：

<form action="xyz.php" id="xyz" name ="xyz" method="post">

<input type="text" class="form-control demo" size="20" autocomplete="on" id="id" name="id" value="">
</form> 

$('.demo').keyup(function() {
  $(".demo").typeahead({
    source: function(query, process) {
      var textVal   = $(".demo").val();


      $.ajax({
        url: 'xyz.php',
        type: 'POST',
        data: 'op=get_data',
        dataType: 'JSON',
        async: true,
        success: function(data) {
          process(data);
        //console.log(textVal);
        }
      });
    }
  });
});

如果您想了解更多信息，请告诉我们。提前谢谢。

Answer 1

很好的解决方案是观察用户输入，并自动更正其条目。

如果您的列表中有FRANCE，并且用户开始输入'fr'，则无法执行任何操作，但如果您没有以'fr'开头的任何项目，则可以将其输入的颜色设置为红色，或者自动为 - 正确，删除不可能的价值。

例如，如果列表中有FINLAND，则只删除'r'。

通过这种方式，用户可以立即了解列表中没有的任何项目。