2017-06-10 5 views
1
<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta http-equiv="Content-Language" content="en-us"> 
    <title>PHP MySQL Typeahead Autocomplete</title> 
    <meta charset="utf-8"> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> 
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 

<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

</head> 

<body> 

     <script type="text/javascript"> 

       $(function() { 
        /*$("#skills").autocomplete({ 
         source: 'singleton.php' 
        });*/ 
        $("#skills").keyup(function(){ 
         $.ajax({ 
          type: 'post', 
          url: 'singleton.php/', 
          data: 'term='+$(this).val(), 
          success: function(success){ 
           $("#suggesstion-box").html(data); 
          }, 
          error: function(error){ 
           console.log("error"); 
          } 
         }) 
        }) 
       }); 
       </script> 

     </script> 

<?php 
/*include_once('connection.php'); 

$conn = new Database();*/ 

$hostname = "localhost"; 
$username = "root"; 
$password = ""; 
$databasae = "employee"; 
if(isset($_POST['term'])){ 
    $query = $_POST['term']; 

$db = new mysqli($hostname,$username,$password,$databasae); 

    //get search term 
    $searchTerm = $_POST['term']; 

    //get matched data from skills table 
    $query = $db->query("SELECT * FROM city WHERE name LIKE '%".$searchTerm."%' ORDER BY name ASC"); 
    while ($row = $query->fetch_assoc()) { 
     $data[] = $row['name']; 
    } 

    //return json data 
    echo json_encode($data); 
} 


?> 
<div class="ui-widget"> 
     Enter City Name: 

     <input type="text" name="city" class="city" id="skills" placeholder="Enter City Name" id="city"> 
      <div id="suggesstion-box"></div> 

     </div> 
</body> 

</html> 

私はネットワークで正しい値を得ていますが、提案ボックスのdivにデータを入力していません。オートコンプリートでAjaxコールを試すコンソールですべてのhtmlを取得しよう

私はどこで間違っているのか分かりません。

答えて

0

「成功」コールバックで「データ」を「成功」に置き換えた可能性はありますか?

    $("#skills").keyup(function(){ 
         $.ajax({ 
          type: 'post', 
          url: 'singleton.php/', 
          data: 'term='+$(this).val(), 
          success: function(success){ 
           $("#suggesstion-box").html(data); 
          }, 
          error: function(error){ 
           console.log("error"); 
          } 
         }) 
        }) 

それは

success: function(data) { 
    $("#suggesstion-box").html(data); 
} 

ことShould't?

+0

さらに、データ変数は名前のARRAYです。配列の各要素は、クエリから返された各レコードの名前です。 $( "#suggesstion-box")。html(data.join( '
'));表示するすべての名前を結合することができます。 – Drew

関連する問題