javascript - JQuery-清除失去焦点的字段，除非该字段是从下拉列表中填充的

Question

我有一个文本框，用户可以在其中输入一些文本，然后会出现一个下拉列表。当用户从下拉列表中选择内容时，下拉列表中的文本将替换他们键入的文本。

现在，如果他们没有从下拉列表中选择任何内容，我希望此文本框自行清除。

所以基本上，唯一可以出现在文本框中的文本是最终从下拉列表中选择的内容。我将如何实现这一点？

我试过:

  jQuery("#" + field).focusout(function() {
    jQuery("#" + field).val("");

  });

但即使他们从下拉列表中选择，这仍然会清除。我将实现什么逻辑来做到这一点？当他们从列表中选择时，我可以设置一个变量或设置为 true 的东西吗？然后我会在 focusout 函数上检查这个？

JQuery 新手!

Answer 1

使用自动完成 change 事件，检查是否存在 ui(从菜单中选择的项目，如果有的话。否则该属性为 null)，如果不存在，则您知道用户没有' 选择一个 autocomplete 选项，您可以清空该值:

change: function (ev, ui) {
    if (!ui.item) {
        $(this).val('');
    }
}

Here's a simple demo fiddle