jquery自动完成将一个变量传递给第二个自动完成

Question

我有2个自动完成在一个页面上搜索一个SQL数据库并显示结果到输入字段。拳头自动完成很好。第二个需要传递client_id，因为它根据第一个搜索的客户端ID搜索sql。另外，我希望第二个自动完成功能可以在用户点击框内时立即显示所有结果。这是我的代码。

$("#client_name").autocomplete(
{ 
    source:'ls_billto_client_name.php', 
    minLength: 0, 
    select: function(event, ui){ 
     $("#client_id").val(ui.item.client_id) 
     $("#client_name").val(ui.item.label) 
     $("#shipto_id").val(ui.item.client_default_shipto_id) 
     $('#shipto_name').prop('disabled', false); 
    } 
}) 

$("#shipto_name").autocomplete(
{ 
    source: 'ls_shipto_locations.php?client_id='+ $("#client_id").val(), 
    minLength: 0, 
    select: function(event, ui){ 
     $("#shipto_id").val(ui.item.shipto_id) 
     $("#shipto_name").val(ui.item.label) 
     $("#shipto_street").val(ui.item.shipto_street) 
     $("#shipto_city").val(ui.item.shipto_city) 
     $("#shipto_stateprov").val(ui.item.shipto_stateprov) 
     $("#shipto_country").val(ui.item.shipto_country) 
     $("#shipto_postalzip").val(ui.item.shipto_postalzip) 
     $("#shipto_phone").val(ui.item.shipto_phone) 
     $("#shipto_fax").val(ui.item.shipto_fax) 
     $("#shipto_website").val(ui.item.shipto_website) 
    } 
}) 

Answer 1

的问题是，当你实例上$('#shipto_name')的autocomplete，它不是动态的。它直接将值填充到字段中，相反，您需要对服务器执行ajax请求，作为回报，您将得到结果。获得这些结果后，您可以将它们映射到由源提供的响应回调来创建您的下拉列表。

$('#shipto_name').autocomplete({ 
    source: function(request, response){ 
     $.ajax({ 
      url:'ls_shipto_locations.php', 
      type: 'GET', 
      data: {client_id : request.term}, 
      success: function(data){ 
       response($.map(data, function(obj){ //response is the callback 
        //considering obj should be JSON with key:value pairs 
        return{ 
         label: obj.key, //key is the literal key of the object returned 
         value: obj.key //key is the literal key of the object returned 
        } 
       })); 
      } 
     }); 
    } 
}); 

现在shipto将正确查找该文件位置内的客户端ID。我们预计，从服务器返回的数据是一个JSON编码的对象，看起来像：

{label: 'Hello', value: 'World'} 

你会在上面的source:结构注意到，我们使用request.term代替$('#client_id').val()，这是更加动态。我们来看看我们如何使用$('#client_name').autocomplete({ select })事件来传递我们想要的数据。

$('#client_name').autocomplete({ 
    select: function(event, ui){ 
     //your code 
     $('#shipto_name').autocomplete('search', ui.item.client_id); 
    } 
}); 

通过调用autocomplete的搜索并传入术语，我们告诉它执行搜索。 ui.item.client_id现在将在我们的$('#shipto_name').autocomplete()中以request_term的形式提供。

这应该是您要使用的预期功能。