автозаполнения несколько полей, основанные на одном поле (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"> 

Я попытался смешать Аякс + autocomplete действительно достигают этого без везения.

(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" /> 

Перейти: 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 
           }; 
       })); 
      } 
     }); 

Final Скрипки: - 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> 

модель Codeigniter, который генерирует 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; 
    } 
} 

Контроллер:

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

Надеюсь, это поможет кому-то!