Автозаполнение пользовательского интерфейса Jquery - использование значения из предыдущего поля выбора

Question

Я хочу автозаполнить текстовый ввод городов, но только искать города в стране, которая была ранее выбрана. Код, который у меня есть, похоже, должен работать, но он не передает правильное значение страны.

Форма:

Country: <select name='country' id='country'>
             <option value='US'>USA</option>
             <option value='UK'>United Kingdom</option>
         </select><br/>
City: <input type='text' name='city' id='city' />

JS:

$( "#city" ).autocomplete({
            source: "searchCities/" + $('select#country option:selected').val(),
            minLength: 2
        });

Структура URL должна быть «searchCities / UK? Term = foo», а оператор SQL ищет значение «term», где код страны - «UK». Если я ввожу URL-адрес вручную, он работает без проблем (ограничивается только страной) ... и автозаполнение работает в форме. Однако он возвращает ВСЕ города без ограничения кодом страны.

Есть ли что-то, что я могу упустить? Или, может быть, лучший способ сделать это? Спасибо!

Answer 1

Если вы этого еще не сделали - вы должны изменять атрибут источника автозаполнения каждый раз, когда изменяется выбранное значение поля выбора.

вы можете уничтожать и пересоздавать автозаполнение каждый раз, когда пользователь выбирает новыйзначение в поле выбора:

<script>
   function renewAutocomplete() {
      $( "#city" ).autocomplete("destroy");
      $( "#city" ).autocomplete({
            source: "searchCities/" + $('select#country option:selected').val(),
            minLength: 2
        });
   }
</script>
Country:
<select name='country' id='country' onchange='renewAutocomplete();'>
   <option value='US'>USA</option>
   <option value='UK'>United Kingdom</option>
</select>
<br/>
City: <input type='text' name='city' id='city' />

или, может быть, лучше не уничтожать его и не перестраивать его, а изменить атрибут источника:

<script>
   function renewAutocomplete() {
      $( "#city" ).autocomplete("option", "source", "searchCities/" + $('select#country option:selected').val());
   }
</script>

Answer 2

Попробуйте это

    $("#city").unautocomplete().autocomplete(

              base_url+"index.php/index/autocompletecities/", 

              {

               extraParams:                 
                   {country:$('#country').val()} 

});