Làm cách nào để chuyển một tham số bổ sung vào trường Tự động điền Jquery?

Question

Tôi đang sử dụng tính năng Tự động điền của JQuery ở một trong các biểu mẫu của tôi.

Biểu mẫu cơ bản chọn sản phẩm từ cơ sở dữ liệu của tôi. Điều này làm việc tuyệt vời, nhưng tôi muốn phát triển hơn nữa để chỉ các sản phẩm được vận chuyển từ một mã zip nhất định được trả lại. Tôi đã có kịch bản phụ trợ đã tìm ra. Tôi chỉ cần tìm ra cách tốt nhất để chuyển mã zip vào tập lệnh này.

Đây là cách biểu mẫu của tôi trông như thế nào.

<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> 

Và đây là mã JQuery:

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

          //action 

           } 
}); 

Mã này hoạt động đến một mức độ nào đó. Nhưng chỉ trả về giá trị zipcode đầu tiên bất kể giá trị nào thực sự được chọn. Tôi đoán điều gì đang xảy ra là URL nguồn được đặt trước khi tải trang thay vì khi menu chọn được thay đổi. Có cách nào để giái quyết vấn đề này không? Hoặc là có một cách tốt hơn tổng thể để đạt được kết quả tôi sau?

Answer 1

Bạn cần phải sử dụng một cách tiếp cận khác nhau cho các source cuộc gọi, như thế này:

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

Định dạng này cho phép bạn vượt qua bất cứ điều gì giá trị là khi nó chạy, như trái ngược với khi đó là ràng buộc.

Answer 2

Tôi tin rằng bạn đúng khi nghĩ rằng cuộc gọi của bạn là $("#product").autocomplete sẽ kích hoạt khi tải trang. Có lẽ bạn có thể gán một handler onchange() vào menu chọn:

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

và có nó làm mất hiệu lực các cuộc gọi #product autocomplete() và tạo một hình mới.

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

Bạn có thể muốn resetAutocomplete của bạn() gọi là thông minh hơn một chút - như kiểm tra nếu mã zip thực sự khác với giá trị cuối cùng - để tiết kiệm một vài cuộc gọi máy chủ.

Answer 3

Tác phẩm này dành cho tôi. Ghi đè lên các sự kiện 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':[] 
}); 

Answer 4

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

Answer 5

Đây không phải là những người đàn ông phức tạp:

$(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 
}); 
}); 

Answer 6

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

Answer 7

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