Применить одно и то же действие автозаполнения к нескольким полям формы? - PullRequest
Новая
       29

Применить одно и то же действие автозаполнения к нескольким полям формы?

5 голосов
/ 07 марта 2012

Я проектирую форму, в которой мне нужно ввести два человека, оба поля поддерживаются автозаполнением из jquery-ui. Действия автозаполнения те же.

Вот проблема, с которой я сталкиваюсь:

При фактическом вводе в форму оба поля будут отправлять правильный запрос AJAX для извлечения кандидатов на автозаполнение. Но только первая форма будет правильно выводить список результатов.

Селектор, который я сейчас использую: 

$(".person_input").autocomplete()

и смена селектора не помогает: 

$("#person1,#person2").autocomplete()

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

Заранее спасибо,

Поля формы определены так: 

<input type="text" value="" name="person1" class="person_input" id="person1">
<input type="text" value="" name="person2" class="person_input" id="person2">

и код автозаполнения как таковой: 

$(".person_input").autocomplete({
    source: function(request, response) {
    $.ajax({
      url: "/ajax/get_person/",
      data: {'q':request.term},
      dataType: "json",
      type: "POST",
      success: function(data){
        response(data);
      },
    });
    },
  focus: function( event, ui ) {
      $(this).val(ui.item.name);
      return false;
    },
    select: function( event, ui ) {
      $(this).val(ui.item.name);
      return false;
    }
  }).data( "autocomplete" )._renderItem = function( ul, item ) {
    return $( "<li></li>" )
      .data( "item.autocomplete", item )
      .append( "<a>" + item.name + "</a>" )
      .appendTo( ul );
  };

Ответы [ 2 ]

16 голосов
/ 07 марта 2012

Итерация dom -> 

$(".person_input").each(function(){ //grab each element with the class = person_input

Для каждого найденного элемента запустите autocomplete () 

  $(this).autocomplete();

Измените автозаполнение в рамках этой функции, чтобы оно применялось ко всем формам. 

$(".person_input").each(function(){
  $(this).autocomplete({
    source: function(request, response) {
      $.ajax({
        url: "/ajax/get_person/",
        data: {'q':request.term},
        dataType: "json",
        type: "POST",
        success: function(data){
          response(data);
        }//unnecessary trailing comma removed here
      });
    },
    focus: function( event, ui ) {
     $(this).val(ui.item.name);
      return false;
    },
    select: function( event, ui ) {
      $(this).val(ui.item.name);
      return false;
    }
  }).data( "autocomplete" )._renderItem = function( ul, item ) {
    return $( "<li></li>" )
    .data( "item.autocomplete", item )
    .append( "<a>" + item.name + "</a>" )
    .appendTo( ul );
  };
});
2 голосов
/ 07 марта 2012

Попробуйте, чтобы увидеть, если он изолирует 2 экземпляра: 

$(".person_input").each(function(){

   $(this).autocomplete(/* options*/);

 })

РЕДАКТИРОВАТЬ: увидеть запятую после того, как success нужно удалить для IE

...