如何根据第一个字段 LIVE 的输入填写第二个字段答案

【问题标题】：How to fill the second field on the basis of the input from first field LIVE如何根据第一个字段 LIVE 的输入填写第二个字段
【发布时间】：2017-03-04 21:18:50
【问题描述】：

我有两个输入字段 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);
}

?>

【问题讨论】：

标签： php jquery mysqli typeahead.js auto-populate

【解决方案1】：

脚本city.php 必须返回姓名和电话号码的值。在您的示例中，您有两次 $row['Name']。

您必须将名称用于原始预输入搜索的值（尝试模板，如here）和选择名称时使用的电话号码。不习惯提前输入，但发现 this solution 对我来说看起来很可靠，可以实现你想要的。

$('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;
    }
});

您使用的是什么版本的预输入？ https://github.com/twitter/typeahead.js?也许您需要包含bloodhound suggestion module...

【讨论】：