先行入力を使用する Bootstrap 検索バーを、さまざまな食品で満たされたリモート SQL データベースに接続しようとしています。「C」と入力すると「シカゴ」という単語がポップアップするため、先行入力がある程度機能していることはわかっていますが、「シカゴ」はSQLデータベースにありません。YouTube のこのチュートリアルに従っていました。
Web ページの HTML/PHP コードは次のとおりです。
これが私の検索バーコードです:
<form class="navbar-search">
<input type="text" id="search" class="search-query span3 pull-right" placeholder="Search" data-provide="typeahead">
<div class="icon-search"></div>
</form>
私のページのフッターにあるJSコードは次のとおりです。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.0.min.js"><\/script>')</script>
<!-- Bootstrap jQuery plugins compiled and minified -->
<script src="js/bootstrap.min.js"></script>
<!-- Bootstrap JS Code -->
<script>
$(document).ready(function(){
$('#search').typeahead({
source: function(query, process) {
$.ajax({
url: 'database.php'
type: 'POST';
data: 'query=' + query;
dataType: 'JSON';
async: true;
success: function(data) {
process(data);
}
});
}
});
});
</script>
これは、SQL データベースにアクセスすることになっている私の database.php コードです。
<?php
if (isset($_POST['query'])) {
// Connect to database
mysql_connect('localhost','root','root');
mysql_select_db('Menu_Items');
// Retrieve the query
$query = $_POST['query'];
// Search the database for all similar items
$sql = mysql_query("SELECT * FROM foods WHERE name LIKE '%{$query}%'");
$array = array();
while ($row = mysql_fetch_assoc($sql)) {
$array[] = row['name'];
}
// Return the json array
echo json_encode($array);
}
?>
データベース情報は次のとおりです。
データベース名: Menu_Items
テーブル名: 食品
テーブルは 2 つの列で構成され、1 番目は一意の ID で、2 番目は「名前」というタイトルです。
私はこれでどこが間違っているのか理解できないようです。私が知る限り、チュートリアルを適切に実行しました。私がめちゃくちゃになっている場所についてのアイデアはありますか?