javascript - 当 $.removed 时自动完成不会 $.empty/comeback

Question

我在输入上有一个自动完成功能，旁边是一个选择元素。 当我触发$.autocomplete时一旦它创建了一个 HTML 列表 <lu ..><li ..></li></lu>如果我选择一个新选项，我不希望它再自动完成，直到我切换回来。

我可以使用 $.remove 删除该元素但如果我再次触发自动完成事件，它就不会回来。 我不能$.empty由于某种原因。

var array = ['this', 'that', 'bla', 'potato'];

$('.input').on('keyup', function() {
  if ($('.option').val() === 'this') {
    $('.input').autocomplete({
      source: array
    });
  } else {
    // Something that removes/deactivates the autocomplete.
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='options'>
  <option value='this'>DoAutocomplete</option>
  <option value='that'>DoNotAutocomplete</option>
<select>

<input class='input' />

有人知道如何解决这个问题吗？

Answer 1

我认为这可能更容易检测下拉列表中所选选项的值，并使用 Taplars 对您的问题进行评论来根据所选值启用或禁用自动完成功能。我没有尝试您的代码，但我认为“keyup”检测是问题的一部分。

这是一个示例:JSFiddle

脚本:

$(document).ready(function() {
    var array = ['this', 'that', 'bla', 'potato'];

  $('#input').autocomplete({
            source: array
  });

  $('#select').on('change', function (e) {
        var selection = $("#select option:selected").val();

        if (selection == 'off') {
                $( "#input" ).autocomplete("disable");
        } else {
                $( "#input" ).autocomplete("enable");
        }
  });
});

HTML:

Toggle Autocomplete:
<select id='select'>
  <option value='on'>On</option>
  <option value='off'>Off</option>
</select><br><br>

<input id='input'>