Jquery UI Autocomplete and subsequent dropdown based on autocomplete value

Submitted by hassanjamal - 10 years ago

sometime we need to autocomplete one input area and based on the value of this input area we sometime populated a dynamic dropdown . I thought it worth sharing .

# Route File
    Route::get('associates/add_to_introducer_id' , 'AdminAssociatesController@getIntroducer');
    Route::get('associates/add_to_rank_list' , 'AdminAssociatesController@getRanklist');

# form file
    .
    .
    {{ Form::hidden('to_introducer_id', Input::old('to_introducer_id'),array('id'=>'to_introducer_id'))}}
    <div class="col-md-6">
        <div class="form-group">
            <label class="col-md-4 control-label" for="introducer_no">Introducer :</label>
            <div class="col-md-8">
                <input class="form-control" type="text" name="introducer_no" id="introducer_no" value="{{{ Input::old('introducer_no', isset($associate) ? $associate->introducer_no : null) }}}" />
            </div>
        </div>
    </div>
    <!-- ./ introducer_id -->

    <!-- rank_id -->
    <div class="col-md-6">
        <div class="form-group">
            <label class="col-md-4 control-label" for="rank_id">Rank :</label>
            <div class="col-md-8">
                {{ Form::select('rank_id',$rank ,isset($associate) ? $associate->rank_id : null, array('class'=>'form-control ' ,'id' =>'rank_id'))}} 
                // $rank  = Rank::lists('rankname', 'id'); use of list method can be noted
            </div>
        </div>
    </div>
    
    // javascipt part
    $(function(){
    	$('#introducer_no').autocomplete({
			source: "add_to_introducer_id",
			select: function(event, ui){
				$('#to_introducer_id').val(ui.item.id);
				$.get("add_to_rank_list",{rank_id: ui.item.rank_id}, function(data,status){
					$('#rank_id').empty();
					$.each(data, function(index, item) {
			            var opt = $('<option />');
			            opt.val(data[index].id);
			            opt.text(data[index].rankname);
			            $('#rank_id').append(opt);
        			});
				});
			}
		});
	});
    
#   Controller file

    public function getIntroducer()
    {
        $term      = Input::get('term');
        $associate = array();
        $search    = DB::select(
                       "
            select id , rank_id ,associate_no as value ,CONCAT(name ,'  ID  ',associate_no) as label
            from associates
            where match (name, associate_no )
            against ('+{$term}*' IN BOOLEAN MODE)
            "
        );

        foreach ($search as $result) {
            $associate[] = $result;

        }

        return json_encode($associate);

    }
    
    public function getRanklist()
    {
        $get_rank_id = Input::get('rank_id');
        $ranklist    = Rank::select('id', 'rankname')->where('rank_no', '<=', $get_rank_no)->get();

        return $ranklist;
    }