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

Question

我正在使用 EasyAutoComplete (http://easyautocomplete.com/), which while it does utilize jquery, is different from the standard jquery ui autocomplete. I'm trying to make it so that users can only select an item that is from the list that gets generated. I found the answer I wanted for the standard jquery ui autocomplete here: jQuery UI autocomplete: enforce selection from list without modifications

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

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

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

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

Answer 1

我尝试了他们 API 中的一些事件，我认为最好的选择是只捕获 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" />

Answer 2

这需要一些研究，但我实际上能够想出一个解决方案。与其在自动完成选项中使用 change()，不如在外部使用它。另外，API 有一个 getSelectedItemData() 函数，您可以使用它来提取项目数据。

$("#artist").change(function () {
    let selectedvalue = $("#artist").getSelectedItemData();
    let specval = selectedvalue[0];
    
    if (specval == "undefined" || specval == null) {
        $("artist").val("");
    }
});

值得注意的是，虽然 EasyAutoComplete 确实有 OnClick 和 OnKeyEnter 事件，但并没有一个很好的、简单的包罗万象的方法。您必须单独编写这些事件，这不是 DRY 编码。此外，当用户在 select 框外单击屏幕时，他们没有事件。

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

How can I limit users to only pick from options listed in EasyAutoComplete (jquery)?

javascript

jquery

jquery-ui-autocomplete

easyautocomplete