Как передать дополнительный параметр в поле автозаполнения Jquery?

Я использую автозаполнение JQuery в одной из моих форм.

Основная форма выбирает продукты из моей базы данных. Это отлично работает, но я хотел бы продолжить разработку так, чтобы возвращались только продукты, отправленные с определенного почтового индекса. У меня есть бэкэнд script. Мне просто нужно разработать лучший способ передать zipcode на этот script.

Вот как выглядит моя форма.

<form>

<select id="zipcode">

<option value="2000">2000</option>
<option value="3000">3000</option>
<option value="4000">4000</option>

</select>

<input type="text" id="product"/>

<input type="submit"/>

</form>

И вот код JQuery:

$("#product").autocomplete
({
     source:"product_auto_complete.php?postcode=" + $('#zipcode').val() +"&",
     minLength: 2,
     select: function(event, ui){

                             //action

                                 }
});

Этот код работает до некоторой степени. Но возвращает только первое значение zipcode независимо от того, какое значение действительно выбрано. Я предполагаю, что происходит то, что исходный URL-адрес загружается при загрузке страницы, а не при изменении меню выбора. Есть ли способ обойти это? Или есть лучший способ достичь результата, который я после?

Ответ 1

Для вызова source вам нужно использовать другой подход, например:

$("#product").autocomplete({
  source: function(request, response) {
    $.getJSON("product_auto_complete.php", { postcode: $('#zipcode').val() }, 
              response);
  },
  minLength: 2,
  select: function(event, ui){
    //action
  }
});

Этот формат позволяет вам передавать любое значение, когда оно выполняется, в отличие от того, когда оно связано.

Ответ 2

Это не сложные люди:

$(document).ready(function() {
src = 'http://domain.com/index.php';

// Load the cities straight from the server, passing the country as an extra param
$("#city_id").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: src,
            dataType: "json",
            data: {
                term : request.term,
                country_id : $("#country_id").val()
            },
            success: function(data) {
                response(data);
            }
        });
    },
    min_length: 3,
    delay: 300
});
});

Ответ 3

Я считаю, что вы правильно поняли, что ваш вызов $("#product").autocomplete запускается при загрузке страницы. Возможно, вы можете назначить обработчик onchange() в меню выбора:

$("#zipcode").change(resetAutocomplete);

и сделать это недействительным для вызова #product autocomplete() и создать новый.

function resetAutocomplete() {
    $("#product").autocomplete("destroy");
    $("#product").autocomplete({
         source:"product_auto_complete.php?postcode=" + $('#zipcode').val(),
         minLength: 2,
         select: function(event, ui){... }
    });
}

Вы можете захотеть, чтобы ваш запрос resetAutocomplete() был немного более умным - например, проверьте, действительно ли почтовый индекс отличается от последнего значения - для сохранения нескольких вызовов сервера.

Ответ 4

Эта работа для меня. Переопределить событие search:

jQuery('#Distribuidor_provincia_nombre').autocomplete({
    'minLength':0,
    'search':function(event,ui){
        var newUrl="/conf/general/provincias?pais="+$("#Distribuidor_pais_id").val();
        $(this).autocomplete("option","source",newUrl)
    },
    'source':[]
});

Ответ 5

jQuery("#whatJob").autocomplete(ajaxURL,{
    width: 260,
    matchContains: true,
    selectFirst: false,
    minChars: 2,
    extraParams: {  //to pass extra parameter in ajax file.
        "auto_dealer": "yes",
    },
});

Ответ 6

$('#txtCropname').autocomplete('Handler/CropSearch.ashx', {
    extraParams: {
        test: 'new'
    }
});

Ответ 7

$('#product').setOptions({
    extraParams: {
        extra_parameter_name_to_send: function(){
            return $("#source_of_extra_parameter_name").val();
        }
    }
})