첫 번째 필드의 입력을 기준으로 두 번째 필드를 채우는 방법 LIVE

두 개의 입력 필드가 있습니다. 1. 이름, 2. 전화. 내가 원하는 것은 (1. 내가 이름을 타이핑하기 시작할 때 자동 완성을 위해 데이터베이스에서 검색해야합니다. 이름이 검색 쿼리에서 선택되었을 때 전화 선택이 선택한 이름에 따라 자동으로 채워지 길 원합니다. 현재 나는 타이프 헤드를 사용하고 있습니다. 의 .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

답변

관련 문제