根據一個字段自動完成多個字段（jQuery自動完成）

Question

我的JSON信息：

{
"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"
}

我希望RES_ID為以下輸入的自動完成功能：

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

當輸入的reservation_id將被填充時，取出其余的RES_CHECK_IN和RES_CHECK_OUT並將其自動填充到

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

我試圖混合ajax +自動完成做到這一點，沒有任何運氣。

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

如何將RES_ID顯示為自動完成，以及如何根據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"}] )
            }
        }
    }
}
} );

並且在HTMl Side

<input id="reservation_id" />

轉到： 鏈接

要么 ：

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
                               };
                }));
            }
        }); 

最終小提琴：- 決賽

Answer 2

所以我還沒有找到一個簡單的解決方案。 必須自己編碼。

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>

生成JSON的Codeigniter模型：

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;
    }
}

控制器：

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

希望對別人有幫助！