javascript - 基于一个字段自动完成多个字段(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 端

<input id="reservation_id" />

去:Link

或:

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

最终 fiddle :- Final