2016-07-17 32 views
0

jqueryトークン入力プラグインhttp://loopj.com/jquery-tokeninput/を使用してデータベースからデータを入力しようとしていますが、何も表示されません。私はどこが間違っているのかを知りたい。データベースからデータを入力するときにJqueryトークン入力が機能しない

私は私が検索すべての例では、動作するようには思えない任意の代替アプローチに

を受け入れます。

私のインデックスページ

<script type="text/javascript" 
     src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"> 
</script> 
<script type="text/javascript" src="src/jquery.tokeninput.js"></script> 

<link rel="stylesheet" href="styles/token-input.css" type="text/css" /> 
<link rel="stylesheet" href="styles/token-input-facebook.css" type="text/css" /> 
<div> 
<input type="text" id="tagcool" name="blah" /> 
<input type="button" value="Submit" />  
<script type="text/javascript"> 
$(document).ready(function() {         
    $("#tagcool").tokenInput("phpsearch.php", { 
    theme: "facebook", 
    preventDuplicates: true,    
}); 

}); 
</script> 

そして、私のPHPページ

<?php 
$link = mysqli_connect("localhost","root","","dbname") or die("Couldn't make connection."); 

$look = $_GET['q']; 
$arr = array(); 
$rs = mysqli_query($link,"SELECT * FROM `country` WHERE name like '%".$look."%'"); 
# Collect the results 
while($obj = mysqli_fetch_object($rs)) { 
    $arr[] = $obj; 
} 
# JSON-encode the response 
$json_response = json_encode($arr); 
# Optionally: Wrap the response in a callback function for JSONP cross-domain support 
if($_GET["callback"]) { 
    $json_response = $_GET["callback"] . "(" . $json_response . ")"; 
} 
# Return the response 
echo $json_response; 

?> 

私のデシベルの例

enter image description here

+0

プラグインオプション(アンサーではありません)で最初に余分なカンマを削除し、正確に何が動作していないか、コンソール上に何があるかを詳細にデバッグ情報 – vinayakj

+0

エラーまたは結果は返しません。ただ検索していると言います... –

+0

ネットワークタブには何がありますか、ajaxの状態は何を示していますか?あなたはjsfiddleを作成できますか? – vinayakj

答えて

2

これは機能します。設定に応じて、以下のコードを少し変更する必要があります。

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="styles/token-input-facebook.css" type="text/css" /> 
</head> 
<body> 
<form name='jqueryAutocompleteForm' id='jqueryAutocompleteForm'> 
    <label for='query'>Search:</label> 
    <input type='text' name='q' class='form-control input-lg' id='query' placeholder='Please Start Typing'> 
    <input type='submit' value='Submit' class='btn btn-info'> 
</form> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script type="text/javascript" src="src/jquery.tokeninput.js"></script> 
<script type="text/javascript"> 
     $(document).ready(function() { 
      $("#query").tokenInput("php.php", { 
       theme: "facebook" 
      }); 
     }); 
     </script> 
</body> 
</html> 

注:あなたの "jquery.tokeninput.js" と "PHP JSONに"、私の場合は "php.php" とあなた「phpsearchへのパスを確認してください。 php "は正しいです。

php.php

<?php 

    //open connection to mysql db 
    $connection = mysqli_connect("localhost","root","","tags") or die("Error " . mysqli_error($connection)); 


    $s = $_GET["q"]; 
    //fetch table rows from mysql db 
    $sql = "SELECT name from mytable WHERE name LIKE '%".$s."%'"; 
    $result = mysqli_query($connection, $sql) or die("Error in Selecting " . mysqli_error($connection)); 

    //create an array 
    $emparray = array(); 
    while($row =mysqli_fetch_assoc($result)) 
    { 
     $emparray[] = $row; 
    } 
    echo json_encode($emparray); 

    //close the db connection 
    mysqli_close($connection); 


?> 

選択クエリを交換し、「$のSQLが= "LIKE mytableは名前から名前を選択「%%" $ sの。。 " ' ";"あなたと一緒に。

私のデータベースには、2つのカラム1.id、2、nameを持つテーブルが1つしかありません。

関連する問題