最初のフィールドの入力に基づいて2番目のフィールドを埋める方法LIVE

2つの入力フィールドがあります。1.名前、2.電話。私が欲しいものはすべてです（1.名前を入力すると、データベースからオートコンプリートを検索する必要があります。名前が検索クエリから選択されたら、選択した名前に基づいて電話入力が自動的に入力されます）現在、名前の検索を自動補完するための.js最初のフィールドの入力に基づいて2番目のフィールドを埋める方法LIVE

私の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); 
} 

?>

出典

2017-03-04 Shubham somani

スクリプトcity.phpは、名前と電話番号の値を返す必要があります。例では、$row['Name']が2回あります。
あなたは名前が元先行入力検索に使用される値を分離する必要が名を選択したときに使用されている電話番号（テンプレート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 ...

を含める必要があります

出典

2017-03-04 21:54:50 Michael

最初のフィールドの入力に基づいて2番目のフィールドを埋める方法LIVE

答えて

関連する問題