如何在下拉框中选择数据时获得自动完成搜索

时间:2013-02-01 20:14:06

标签: jquery codeigniter jquery-autocomplete

Veiw代码低于

<select name ="dept" id="dept">
   <option value="1">Software</option>
   <option value="2">Marketing</option>
</select>

<input name="section_name" id="section_name" type="text">
<input name="emp_id" id="emp_id" type="text">

Jquery Code在下面

$(document).ready(function() {
$('#section_name').keydown(function(){
    $(this).autocomplete({
        source: "<?php echo base_url(); ?>index.php/search_con/section_name",
        minLength: 0,
        autoFocus: true,
        select: function(event, ui)
        {
        }
    });
  });   
$('#emp_id').keydown(function(){
    $(this).autocomplete({
        source: "<?php echo base_url(); ?>index.php/search_con/emp_id",
        minLength: 0,
        autoFocus: true,
        select: function(event, ui)
        {
        }
    });
  });

});

基本上我希望当我选择部门下拉菜单时,它会在部分名称中自动完成,当在自动填充部分名称中搜索部分名称并将选择然后这里将来emp_id自动完成,我将搜索Emp ID。< / p>

其他方式我可以说,它将是部门名称下的部门名称和部门名称下的emp_id。

我如何成功解决,请帮助我。

1 个答案:

答案 0 :(得分:2)

根据需要设置两个隐藏字段或两个变量,但我会使用变量

当用户选择某个部门时,您应该告诉服务器在该部门中进行搜索,这样您就需要修改BE代码以便实现此目的

var current_department = ""; 

var current_lang = ""; 

//this will be called when ever the select changed 

$('#dept').change(function(){
current_department =  $(this).find(":selected").text();
}); 

在部门自动填充中,您需要发送变量 在这里,它会发送您可以设置的部门名称val()而不是text()取决于您

现在自动完成应该是这样的

$('#section_name').keydown(function(){
    $(this).autocomplete({
        source: "<?php echo base_url(); ?>index.php/search_con/section_name/"+current_department,
        minLength: 0,
        autoFocus: true,
        select: function(event, ui)
        {
               //here you need to tell the next autocomplete what lang you selected e.g. PHP 
              current_lang = ui.item.value; //or .text it's up to you 
        }
    });
  });   

所以下一个自动完成应该是这样的

$('#emp_id').keydown(function(){
    $(this).autocomplete({
        source: "<?php echo base_url(); ?>index.php/search_con/emp_id/"+current_lang,
        minLength: 0,
        autoFocus: true,
        select: function(event, ui)
        {
        }
    });
  });

});

请记住修改您的ServerSide代码 我希望这可以帮到你:)