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

Question

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

?>

Answer 1

脚本 city.php 必须 return 姓名和电话号码的值。在您的示例中，您有两次 $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;
    }
});

您使用的是哪个版本的 typeahead？ https://github.com/twitter/typeahead.js? Maybe you need to include the bloodhound suggestion module...

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

How to fill the second field on the basis of the input from first field LIVE

php

jquery

mysqli

auto-populate

typeahead.js