Как заполнить несколько полей из одного автозаполнением jquery?

Question

[Иван Дрожжин]

День добрый.
Есть форма:

<form class="cars" action="cars.php" method="post" name="car_form" id ="car_form">
			<caption>Автопарк</caption>
			<input id="car_num" name="car_num" tabindex="6.1" placeHolder="Гос. номер:" type="text" style="width:90px"/>
			<input id="car_mark" name="car_mark" tabindex="6.2" placeHolder="Марка:" type="text" list="carMarkList" style="width:100px"/>
			<datalist id="carMarkList">
				
			</datalist>
			<input id="car_model" name="car_model" tabindex="6.3" placeHolder="Модель:" type="text" list="carModelList" style="width:100px"/>
			<datalist id="carModelList">
				
			</datalist>
			<input id="car_color" name="car_color" tabindex="6.4" placeHolder="Цвет:" type="text" list="carColorList" style="width:50px"/>
			<datalist id="carColorList">
				
			</datalist>
			<select name="car_class" id="car_class" tabindex="6.5">
				<option value=Стандарт>Стандарт</option>
				<option value=Комфорт>Комфорт</option>
				<option value=Комфорт+>Комфорт+</option>
				<option value=Полуминивэн>Полуминивэн</option>
				<option value=Минивэн>Минивэн</option>
				<option value=Микроавтобус>Микроавтобус</option>
				<option value=Автобус>Автобус</option>
				<option value=Бизнес>Бизнес</option>
				<option value=V-класс>V-класс</option>
				<option value=Бизнес+>Бизнес+</option>
				<option value=Эвакуатор>Эвакуатор</option>
				<option value=Грузоперевозки>Грузоперевозки</option>
			</select>
			<select name="car_type" id="car_type" tabindex="6.6">
				<option value=Универсал>Универсал</option>
				<option value=Хэчбек>Хэчбек</option>
				<option value=Cедан>Cедан</option>
			</select>
			<input name="car_pass" tabindex="6.7" placeHolder="Мест:" type="number" style="width:50px"/>
			<input name="car_cargo" tabindex="6.8" placeHolder="Гр-ть, т:" type="number" style="width:50px"/>
			<input name="car_comment" tabindex="6.9" placeHolder="Доп. данные:" type="text" style="width:400px"/>
			<input id="submit_car" type="submit" name="submit_car" value="Внести" tabindex="6.10">
		</form>

Поля марка, модель и цвет с подсказками из БД, вывод на jQuery:

$("#car_mark").focus(function(){
 $.get("getCarMark.php", {car_mark: $(this).val()}, function(data){
   $("#carMarkList").empty();
   $("#carMarkList").html(data); 
   });     
   });
    $("#car_model").focus(function(){
 $.get("getCarModel.php", {car_model: $(this).val()}, function(data){
   $("#carModelList").empty();
   $("#carModelList").html(data); 
   });     
   });
    $("#car_color").focus(function(){
 $.get("getCarColor.php", {car_color: $(this).val()}, function(data){
   $("#carColorList").empty();
   $("#carColorList").html(data); 
   });     
   });

Ну и сам запрос к БД:

$car_color     = $_GET['car_color'];
	$sql      = "SELECT car_color FROM autopark";
	$result   = $db->query($sql);
	if (!$result) 
	{
	    echo mysqli_error($db);
	}	
	else
	{	
	   while($row = $result->fetch_object())
	   echo '<option value="' . $row->car_color . '">';
	}

(код запроса к БД вставил только для поля color, остальные аналогичны)

Подскажите, как из подсказки мне автозаполнить сразу 3 поля?
Т.е. Запрос к БД я перепишу и в 3-х полях в datalist будет выводится Марка+Модель+Цвет, при выборе подсказки должны заполниться все три поля, в поле car_mark попадет марка, в поле car_model - модель и в car_color попадет цвет. На данный момент получается заполнять только одно поле всеми тремя значениями, собственно, не удивительно, если я все три как опцию у поля вывожу. Но никак не могу допереть как заполнить их по отдельности

Answer 1

[Владислав]

Делали что-то похожее. Реализовали так: в контейнере подсказки через data-атрибут вшивали нужные данные автозаполнения. Далее через событие click на подсказке распихивали эти данные по нужным полям. Вот пример кода:

$('.item').click(function () {
        $('#id1').val($(this).data('demo1')).change();
        $('#id2').val($(this).data('demo2')).change();
        $('#id').val($(this).data('demo3')).change();        
});