Как заполнить второе поле на основе ввода из первого поля LIVE

Question

Как заполнить второе поле на основе ввода из первого поля LIVE

У меня есть два поля ввода: 1. Имя, 2. Телефон. Все, что я хочу, это (1. Когда я начинаю набирать имя, он должен искать в базе данных автозаполнение. Теперь, когда имя выбрано из поискового запроса, я хочу, чтобы телефонный ввод заполнялся автоматически на основе выбранного имени.
В настоящее время я использую typeahead.js для автозаполнения поиска имени.

Мой HTML-код:

<!DOCTYPE html>
<html lang="en">

<head>

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="typeahed.js"></script>
<style>
h1 {
font-size: 20px;
color: #111;
}

.content {
width: 80%;
margin: 0 auto;
margin-top: 50px;
}

.tt-hint,
.Name {
border: 2px solid #CCCCCC;
border-radius: 8px 8px 8px 8px;
font-size: 24px;
height: 45px;
line-height: 30px;
outline: medium none;
padding: 8px 12px;
width: 400px;
}

.tt-dropdown-menu {
width: 400px;
margin-top: 5px;
padding: 8px 12px;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px 8px 8px 8px;
font-size: 18px;
color: #111;
background-color: #F1F1F1;
}
</style>
<script>
$(document).ready(function() {

$('input.Name').typeahead({
name: 'Name',
remote: 'city.php?query=%QUERY'

});

})
</script></head>

<body>
<div class="content">

<form>
<h1>Try it yourself</h1>
<input type="text" name="Name" size="30" class="Name" placeholder="Please Enter Name or ZIP code"> </input>

<input type="text" name="Telephone" size="30" class="Telephone" placeholder="Telephone"> </input>

</form>
</div>
</body>

</html>

Мой код PHP:
// Не ставить часть подключения к базе данных (очевидно, я подключил его)

<?php
if (isset($_REQUEST['query'])) {
$query = $_REQUEST['query'];
$sql = mysqli_query ($conn,"SELECT Name,Telephone FROM customerdetails WHERE Name LIKE '%{$query}%'");
$array = array();
while ($row = mysqli_fetch_array($sql)) {
$shu[] = array (
'label' => $row['Name'],
'value' => $row['Name'],

);
}

echo json_encode ($shu);
}

?>

0

auto-populate jquery mysqli php typeahead.js

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Сценарий city.php должны возвращать значения для имен и номеров телефонов.
В вашем примере у вас есть дважды $row['Name'],
Вы должны отделить значения, которые имена используются для первоначального поиска typeahead (попробуйте шаблон лайк Вот) и номер телефона используется при выборе имени.
Не используется, чтобы напечатать, но нашел это решение что выглядит твердо для меня, чтобы достичь того, что вы хотите.
```
$('input.Name').typeahead({
name: 'Name',
remote: 'city.php?query=%QUERY',
updater: function(item) {
// try to get telephone number out of "item" and set it to the telephone number field
return item;
}
});
```

Какую версию typeahead вы используете? https://github.com/twitter/typeahead.js? Может быть, вам нужно включить модуль предложения бладхаунда…

0