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

#php #jquery-ui #autocomplete

#php #jquery-пользовательский интерфейс #автозаполнение

Вопрос:

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

Форма:

 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 вручную, он работает без проблем (ограничивается только страной)… и автозаполнение работает в форме. Однако он возвращает ВСЕ города без ограничения кодом страны.

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

Ответ №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>
  

Комментарии:

1. Идеальный. это сработало. Спасибо! И вы правы, мне не нужно было его уничтожать.

Ответ №2:

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

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

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

              {

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

});
  

Комментарии:

1. похоже, не работает. Глядя на Firebug, он говорит «неавтоматическое завершение не является функцией». Как бы то ни было, я использую jQuery 1.5.2 и jquery ui 1.8.12