2013-05-01 101 views
0

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

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

回答

0

的问题是,当你实例上$('#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的形式提供。

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

+0

搜索return..how是否显示带有ajax请求的结果? 而($行= mysqli_fetch_array($结果)) { \t $ shiptoname [] =阵列( \t \t 'shipto_id'=> $行[ 'shipto_id'], \t \t '标签'=> $行[ 'shipto_name'], \t \t 'shipto_street'=> $行[ 'shipto_street'], \t \t 'shipto_city'=> $行[ 'shipto_city'], \t \t 'shipto_stateprov'=> $行[” shipto_stateprov'], \t \t'shipto_country'=> $ row ['shipto_country'], \t \t 'shipto_postalzip'=> $行[ 'shipto_postalzip'], \t \t 'shipto_phone'=> $行[ 'shipto_phone'], \t \t 'shipto_fax'=> $行[ 'shipto_fax'], \t \t'shipto_website'=> $ row ['shipto_website'] \t \t); } echo json_encode($ shiptoname); – snowman1686 2013-05-07 21:25:44

+0

@ snowman1686这个数组需要像''label'=> $ row ['whatever'],'value'=> $ row ['whatever']''''然后你会对它进行编码。如果您想使用其他数据,则需要使用'._renderItem'方法返回可用于构建自动完成列表的可映射对象。 – Ohgodwhy 2013-05-07 21:35:51

+0

应该有指定。不显示在下拉菜单中。当选中它时,将使用从sql返回的json填充页面上的输入字段。 – snowman1686 2013-05-08 00:02:11