Вопрос по ajax, jquery – Автозаполнение Ajax для Jquery: как отправить динамические параметры

8

я используюAjax Autocomplete for Jquery ( http://www.devbridge.com/projects/autocomplete/jquery/ ) в одном из моих приложений. Форма поиска выглядит примерно так:

<form id="topsearch" method="POST" action="/searchAll"><input type="text" class="searchform" name="q" id="q" value="Country, City, Hotel or a Tourist Attraction" o    nfocus="clearInput(this);" onblur="defaultInput(this);" />
  <select id="top_search_select" name="entity_type">
     <option value="country">Countries</option>
     <option value="city">Cities</option>
     <option value="place" selected="selected">Tourist Attractions</option>
     <option value="hotel">Hotels</option>
  </select>
  <input type="submit" name="topsearch" class="submit" value="SEARCH" title="SEARCH"/>
</form>

и конфигурация автозаполнения выглядит так:

<script type="text/javascript">
 //<![CDATA[
   var a = $('#q').autocomplete({
     serviceUrl:'/search',
     delimiter: /(,|;)\s*/, // regex or character
     maxHeight:400,
     width:325,
     zIndex: 9999,
     params: {entity_type:$('#top_search_select').val()},
     deferRequestBy: 0, //miliseconds
     noCache: false, //default is false, set to true to disable caching
     onSelect: function(value, data){window.location.replace(data);},
   });
 //]]>
</script>

Теперь проблема в бэкэнде: у меня есть разные обработчики, которые генерируют результаты для разных типов объектов, которые пользователь выбирает с помощью опции выбора в форме.

По умолчаниюentity_type являетсяplace который очень хорошо передается обработчику в бэкэнде. Тем не менее, я хочу, чтобы человек выбирал другую сущность из поля выбора в формеparams: {entity_type:$('#top_search_select').val()} в конфигурации скрипта также обновляется.

Любая помощь или идеи будут высоко оценены. Благодарю.

Ваш Ответ

6   ответов
3

Возможно, это старый вопрос, но я чувствую, что это лучший способ сделать это:

$('#q').autocomplete({
    ...
    onSearchStart: function(q) {
        q.entity_type = $('#top_search_select').val();
    }
    ...
});
В качестве альтернативы вы можете использовать функцию для параметра params (см. Мой ответ).
идеально ... это работает только для меня
0

Ответ Пеза не сработал для меня, лишь небольшая разница с «extraParams». Это делает параметры динамическими, а не устанавливаемыми при загрузке страницы ...

$("#field").autocomplete('pageurl.php', {     
   width: 240,
   matchContains: true,
   mustMatch: false,
   selectFirst: false,
   extraParams: {
      start:function () { 
           return $("#start_date").val(); 
      },
      end: function () {
           return $("#end_date").val() ;
      }
  } 
});
Нет такого параметра "extraParams" в автозаполнении DevBridge. Возможно, вы используете другой скрипт автозаполнения.
6

В качестве альтернативы, вы можете указать параметры, используя функцию, которая оценивается непосредственно перед отправкой запроса ajax.

$('#q').autocomplete({
    ...
    params: {
        'entity_type': function() {
            return $('#top_search_select').val();
        }
    }
    ...
});
Это самый чистый и простой способ справиться с этим. Это гораздо лучшее решение, чем решения, которые вызывают setOptions () каждый раз, когда что-то меняется.
0

Все ответы, приведенные выше, НЕ работали для меня (я подозреваю, потому что я передаю «POST» данные через переменную ajaxSettings, которая может повлиять на «params», но я не проверял дважды).

В любом случае все комментарии дали хорошие подсказки, и я придумал следующее:

var data={          
    'phrase': function() {
        return $('#ajax_post').val();
    },
    'activity_id': function() {
        return $('#activity_id').val();
    }
}

var options = {
    noCache: true,
    transformResult: function(response) {
        //whatever
    },
    onSelect: function(suggestion) {
        //whatever
    },  
    serviceUrl: "MyPHP.php",
    ajaxSettings: {
        dataType: "json",
        method: "POST",
        data: data
    }
};  

$("#ajax_post").autocomplete(options);

Таким образом, я смог доставить в скрипт PHP и содержимое полей ввода ajax_post и activity_id.

Обратите внимание, что этого недостаточно для:

'phrase': $('#ajax_post').val()

Потому что, как упоминалось в других ответах, значение становится статическим.

0

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

<script type="text/javascript">
//<![CDATA[
  var a = $('#q').autocomplete({
    serviceUrl:'/search',
    delimiter: /(,|;)\s*/, // regex or character
    maxHeight:400,
    width:325,
    zIndex: 9999,
    params: {entity_type:$('#top_search_select').val()},
    deferRequestBy: 0, //miliseconds
    noCache: false, //default is false, set to true to disable caching
    onSelect: function(value, data){window.location.replace(data);},
  });
  a.setOptions({params:{entity_type:$('#top_search_select').val()}});
//]]>
</script>

и к функции готовности документа добавьте это

$("#top_search_select").change(function() {
  a.setOptions({params:{entity_type:$('#top_search_select').val()}});
});
Я пытался использовать ваше решение, но безрезультатно. Что нужно сделать для передачи динамических параметров.
вызвать & quot; setOptions & quot; метод может быть: / Amyth
0

Как ваш плагин сайт указывает на использование здесьhttp://www.devbridge.com/projects/autocomplete/jquery/ оно имеетsetOptions метод объекта, который он возвращает, который вы можете использовать позже для динамического изменения параметров.

Добавитьonchange обработчик на элементе выбора и изменитьparams параметры каждый раз, когда пользователь выбирает другое значение, как

$(function(){
  var ac = $('#q').autocomplete({
    serviceUrl:'/search',
    delimiter: /(,|;)\s*/, // regex or character
    maxHeight:400,
    width:325,
    zIndex: 9999,
    params: {entity_type:$('#top_search_select').val()},
    deferRequestBy: 0, //miliseconds
    noCache: false, //default is false, set to true to disable caching
    onSelect: function(value, data){window.location.replace(data);},
  });

  $("#top_search_select").change(function() {
      ac.setOptions({params:{entity_type:$(this).val()}});
  });


});

Вы должны поместить весь свой код внутриdocument ready.

Спасибо за ваш быстрый ответ. Однако исходный метод почему-то не работает. Я решил это с помощью сообщения setOptions, хотя. Amyth
Извините, я думал, что вы используете автозаполнение пользовательского интерфейса jQuery. Обновленный ответ. :)

Похожие вопросы