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 + autocomplete做到没有任何运气。

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

我如何将RES_ID显示为自动完成以及如何根据RES_ID填充其余输入？

Answer 1

select count(*) from  table1 group by column1 having max(rownum) = 4

和HTMl Side

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

去：Link

或：

<input id="reservation_id" />

最后小提琴： - Final

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

希望它会帮助别人！

基于一个字段自动完成多个字段（jQuery自动完成）

2 个答案: