javascript - 如何限制用户只能从 EasyAutoComplete (jquery) 中列出的选项中进行选择？

Question

我正在使用 EasyAutoComplete ( http://easyautocomplete.com/ )，虽然它确实使用了 jquery，但它与标准的 jquery ui 自动完成不同。我正在尝试使用户只能从生成的列表中选择一个项目。我在这里找到了我想要的标准 jquery ui 自动完成的答案：jQuery UI autocomplete: enforce selection from list without modify

问题是我不太确定如何获取该代码并将其与 EasyAutoComplete 一起实现。具体来说，我想使用这个位：

    change: function (event, ui) {
        if (ui.item == null || ui.item == undefined) {
            $("#artist").val("");
            $("#artist").attr("disabled", false);
        } else {
            $("#artist").attr("disabled", true);
        }
    }

虽然 EasyAutoComplete 的文档确实提供了几个事件处理程序，但它们都不是我想要的事件。我猜我需要以某种方式将它放入 jquery.easy-autocomplete.min.js 代码本身，但我不知道从哪里开始！

解决这个问题的最佳方法是什么？

标签： javascriptjqueryjquery-ui-autocompleteeasyautocomplete

Answer 1

我从他们的 API 中尝试了一些事件，并认为最好的办法是捕获文本字段值 on blur，然后将其与可用数据进行比较

<script>
$(document).ready(() => {
  var options = {
  data: ["blue", "green", "pink", "red", "yellow"]
  }
    
$("#basics").easyAutocomplete(options);
$("#basics").blur(function() {
  let myval = $(this).val().trim().toLowerCase();
  let comparedata = options.data.map( (item) => {return item.toLowerCase()});
  if (comparedata.indexOf(myval) == -1) {
    $(this).val('');
  }
})
});
</script>

 <input id="basics" />