Autocomplete не $ .пустое/возвращение, когда $ .removed

Question

У меня есть автозаполнение на входе, а рядом с ним выбран элемент select. Когда я вызываю $.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'>