Question

Veiw code is below

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

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

});

Basically I want that when i will select Department dropdown, it will come autocomplete in section name, when in autocomplete section name will search section name and will select then here will come emp_id autocomplete and i will to do search Emp ID .

Other way i can say, It will be department’s under section name and section name’s under emp_id.

How can i solve successfully, Please any help me.

Answer 1

Make two hidden fields or two variables as you like but I will do it with variables

When the user selects some department you should tell the server to search in that department so you will need to modify your BE code so you can achieve this

var current_department = ""; 

var current_lang = ""; 

//this will be called when ever the select changed 

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

In the department autocomplete you need to send the variable
here it will send the department name you can set val()instead of text() it’s up to you

Now the autocomplete should now about that so

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

So the next autocomplete should be like this

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

});

Please remember to modify your ServerSide code
I hope this can help you 🙂