jQuery 자동 완성이 결과를 표시하지 않습니다.

Question

사용자가 입력 필드에 입력을 시작하면 드롭 다운에서 결과가 생성되기 시작합니다.

예를 들어 Google 또는 Facebook 검색 창에 입력을 시작할 때와 같습니다.

실제로 실제로 무엇이 불려지나요?

업데이트 :

내가 jQuery를 자동 완성 사용하기로 결정했다.

나는 다음과 같은

<form action="" method="post"> 
    <input type="text" class="auto" name="search" autocomplete="off"> 
</form> 

<script> 
    $(document).ready(function($){ 
    $('.auto').autocomplete({ 
    source:'connect.php', 
    minLength:1 
    }); 
    }); 
</script> 

이 그리고 내가 내 쿼리로 입력하기 전에 $ 용어를 소독 할 필요가 알고 을 connect.php.

if(isset($_GET['term'])) { 
    require "db.php"; 

    $con = mysqli_connect("$host","$user","$password","$db"); 

    if (mysqli_connect_errno()) 
    { 
    echo "Failed to connect to MySQL: " . mysqli_connect_error(); 
    } 

    $term = $_GET['term']; 
    $query = "SELECT `name` FROM `products` WHERE `name` LIKE '%$term%'"; 
    $result = mysqli_query($con, $query); 

    while ($row = mysqli_fetch_array($result)) { 
    echo json_encode($row); 
    } 
} 

지금 내가 응답을 검사 크롬 도구를 사용할 때, 그것은 내가 JSON 형식으로 원하는 데이터를 찾아온다 완전히 잘 작동합니다.

그러나 어떤 이유로 인해 페이지에 '결과가 없습니다'라는 메시지가 표시됩니다.

Answer 1

이것을 선매/자동 완성이라고합니다.

Twitter Bootstrap 2.0 (3.0에서 사용할 수 없습니다.) & jQuery UI에 필요한 항목이 있습니다.

Answer 2

브라우저를위한 UI의 일부인 경우가 있습니다. 이전 항목이있는 입력란을 자동 완성합니다. 이 같은 결과이를 위해

<div>Choose a browser from this list:</div> 
<input list="browsers" /> 
<datalist id="browsers"> 
    <option value="Chrome"> 
    <option value="Firefox"> 
    <option value="Internet Explorer"> 
    <option value="Opera"> 
    <option value="Safari"> 
</datalist> 

을 얻기 위해 입력 필드의 목록 속성에 해당 요소를 연결할 수 있습니다 datalist라는 HTML5 요소가있다, 당신이 할 필요가있는 데이터베이스의 항목으로하여 DataList의 옵션 값을 채울 것입니다 . 이런 식으로 작동합니다 ...

<?php 
    $pdo = new POD('mysql:host=localhost;dbname=test', 'username', 'password', [PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8']); 
    $sth = $pdo->prepare("SELECT id, value FROM browsers"); 
    $rows = $sth->execute()->fetchAll(); 
?> 
    <div>Choose a browser from this list:</div> 
    <input list="browsers" /> 
    <datalist id="browsers"> 
<? foreach ($rows as $row): ?> 
     <option value="<?=$row['value']?>"> 
<? endforeach; ?> 
    </datalist> 

Answer 3

데이터베이스의 모든 레코드를 가져 와서 반환해야합니다.

Answer 4

서버 (PHP 스크립트)에 대한 ajax 요청을하는 것이 좋습니다. 먼저 검색을위한 텍스트 상자에 oninput 이벤트 핸들러가 필요합니다. PHP 스크립트는 원하는 레코드를 반환합니다.

<input type="text" id="searchBox" oninput="searchTheDatabase(this.value)" value="let us search it'> 
<div id="results"></div> 

자바 스크립트 : 여기 내 코드는

<script type="text/javascript"> 
    function searchTheDatabase(searchText) 
    { 
     $.post("search.php", { searchText:searchText}) 
    .done(function(data) { 
    $("#results").html(data); 
    }); 
    } 
    </script> 

PHP :

<?php 
//put your connection code here 
$searchText = mysql_real_string_escape($_POST['searchText']); 
$searchTextLength = strlen($searchText); 
$query = "select * from products where"; 
//I'm not sure how you search for only the first so many characters, but you can use $searchTextLength to help you 
$result = mysql_query($query, $connect); 
while($row = mysql_fetch_array($result)) 
{ 
    echo $row['name']; 
} 
?> 

이 당신을 위해 작동하지 않습니다 내가 코딩을 좀 더 할 것 알려줘. :-) 행운을 빕니다!