根据一个字段自动完成多个字段（jQuery自动完成）

Question

My JSON information:

{
"RES_ID":"2622959",
"PROP_ID":"76055",
"RES_CHECK_IN":"2015-04-21",
"RES_CHECK_OUT":"2015-04-25",
"RES_N_ADULTS":"6",
"RES_GUEST_FIRSTNAME":"Nicolas",
"RES_GUEST_LASTNAME":"Prantzos"
}

I want the RES_ID as autocomplete for the following input:

<input id="reservation_id" class="ui-autocomplete-input form-control" />

And when the input reservation_id will be filled take the rest RES_CHECK_IN and RES_CHECK_OUT and autofill them in

<input type="text" class="form-control" name="start">
<span class="input-group-addon">to</span>
<input type="text" class="form-control" name="end">

I tried to mix ajax + autocomplete do achieve that without any luck.

 (function autocomplete_search() {
        //this function take the @res_id input
        $("#reservation_id").autocomplete({
            source: "/police/get_res"
        });
    })();

How I show RES_ID as autocomplete and how i fill the rest of the inputs based on the RES_ID?

Answer 1

$("#reservation_id").kendoAutoComplete( {
dataTextField: "name",
dataSource: {
    transport: {
        read: {
            url: "JSON File name",
            serverPaging:true,
            type: "POST",
            data: { 
                json: JSON.stringify([{"name": "Karan"}, {"name": "Singh"}] )
            }
        }
    }
}
} );

and in HTMl Side

<input id="reservation_id" />

Go : Link

or :

var data = [{
"RES_ID":"2622959",
"PROP_ID":"76055",
"RES_CHECK_IN":"2015-04-21",
"RES_CHECK_OUT":"2015-04-25",
"RES_N_ADULTS":"6",
"RES_GUEST_FIRSTNAME":"Nicolas",
"RES_GUEST_LASTNAME":"Prantzos"
 }];
 $("#reservation_id").autocomplete({
            source: function (request, response) {
                response($.map(data, function(v,i){
                    return {
                                label: v.RES_ID,
                                value: v.RES_GUEST_LASTNAME
                               };
                }));
            }
        }); 

Final Fiddle :- Final

Answer 2

So I haven't found an easy solution for this. had to code myself.

jQuery:

(function autocomplete_search() {
    //this function take the @res_id input
    var ac_config = {
        source: "/police/get_res",
        select: function(event, ui) {
            $("#reservation_id").val(ui.item.RES_ID);
            $("#checkin").val(ui.item.RES_CHECK_IN);
            $("#checkout").val(ui.item.RES_CHECK_OUT);
            $("#firstname").val(ui.item.RES_GUEST_FIRSTNAME);
            $("#lastname").val(ui.item.RES_GUEST_LASTNAME);
        },
        minLength: 1
    };
    $("#reservation_id").autocomplete(ac_config);
})();

HTML:

<div class="form-group">
    <label class="col-md-3 control-label" for="inputTooltip">Firstname <span class="required">*</span>
    </label>
    <div class="col-md-6">
        <input type="text" title="" data-toggle="tooltip" data-trigger="hover" class="form-control" data-original-title="What is your name?" id="firstname" aria-describedby="tooltip332323">
    </div>
</div>

<div class="form-group">
    <label class="col-md-3 control-label" for="inputTooltip">Lastname <span class="required">*</span>
    </label>
    <div class="col-md-6">
        <input type="text" title="" data-toggle="tooltip" data-trigger="hover" class="form-control" data-original-title="What is your Last name?" id="lastname" aria-describedby="tooltip332323">
    </div>
</div>

<div class="form-group">
    <label class="col-md-3 control-label">Checkin / Checkout:</label>
    <div class="col-md-6">
        <div class="input-daterange input-group" data-plugin-datepicker="">
            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
            <input type="text" class="form-control" id="checkin" name="checkin" value="">
            <span class="input-group-addon">to</span>
            <input type="text" class="form-control" id="checkout" name="checkout" value="">
        </div>
    </div>
</div>

Codeigniter model which generates the JSON:

function get_res($q) {
    $this->db->select('RES_ID, PROP_ID, RES_CHECK_IN, RES_CHECK_OUT, RES_N_ADULTS, RES_GUEST_FIRSTNAME, RES_GUEST_LASTNAME');
    $this->db->like('RES_ID', $q);
    $query = $this->db->get('reservations');
    if($query->num_rows() > 0){
        foreach ($query->result_array() as $row){
          //build an array
            $row['value'] = $row['RES_ID'];
            $row['label'] = "{$row['RES_ID']}";
            $matches[] = $row;


        }
        echo json_encode($matches); //format the array into json data
        exit;
    }
}

Controller:

function get_res(){
    if (isset($_GET['term'])){
        $q = strtolower($_GET['term']);
        $this->Police_model->get_res($q);
    }
}

Hope It will help someone!