如何在第一個字段的輸入的基礎上填寫第二個字段LIVE

我有兩個輸入字段1.名稱，2.電話。我想要的是（1.當我開始輸入名稱時，它必須從數據庫中搜索自動完成現在，當從搜索查詢中選擇了名稱時，我希望電話輸入在選定名稱的基礎上自動填充當前我正在使用typeahead .js文件，就能自動搜索名稱如何在第一個字段的輸入的基礎上填寫第二個字段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']。

你必須分開的名字被用於原預輸入搜索值（嘗試模板像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

如何在第一個字段的輸入的基礎上填寫第二個字段LIVE

回答

相關問題