0
Twitter Typeaheadを使用してHTMLページでインスタント検索を実装しようとしていますが、検索ボックスにテキストが入力されたときに応答せず、クロムのjavascriptコンソールのエラーAJAX、Twitter Typeaheadを使用したMySQLデータベースのPHP即時検索が失敗する
使用されているすべてのコードは完全に簡略化されているため、これが起こるのは非常に奇妙なようです。
ご協力いただければ幸いです。
SQLデータベースを作成するには：
CREATE DATABASE `library`;
USE `library`;
CREATE TABLE IF NOT EXISTS `books` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`title` varchar(100) NOT NULL,
`author` varchar(30) NOT NULL,
`isbn` varchar(30) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1_swedish_ci AUTO_INCREMENT=6;
INSERT INTO `books` (`id`, `title`, `author`, `isbn`) VALUES
(1, 'Learning PHP, MySQL & JavaScript', 'Robin Nixon', 'ISBN-13: 978-1491918661'),
(2, 'PHP and MySQL for Dynamic Web Sites', 'Larry Ullman', 'ISBN-13: 978-0321784070'),
(3, 'PHP Cookbook', 'David Sklar', 'ISBN-13: 978-1449363758'),
(4, 'Programming PHP', 'Kevin Tatroe', 'ISBN-13: 978-1449392772'),
(5, 'Modern PHP: New Features and Good Practices', 'Josh Lockhart', 'ISBN-13: 978-1491905012');
index.htmlを
<html>
<head>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="typeahead.bundle.js"></script>
<script type="text/javascript">
window.onload = function() {
if (window.jQuery) {
alert("jQuery is loaded");
} else {
alert("jQuery is not loaded");
}
}
</script>
<title>AJAX PHP Search Engine Script for MySQL Database</title>
<style type="text/css">
.se-example {
font-family: sans-serif;
position: relative;
margin: 100px;
}
.typeahead {
background-color: #FFFFFF;
}
.typeahead:focus {
border: 1px solid #999999;
}
.tt-query {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
color: #999999;
}
.typeahead, .tt-query, .tt-hint {
border: 1px solid #CCCCCC;
border-radius: 4px;
font-size: 16px;
height: 38px;
line-height: 30px;
outline: medium none;
padding: 8px 12px;
width: 396px;
}
.tt-dropdown-menu {
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 4px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
margin-top: 12px;
padding: 8px 0;
width: 422px;
}
.tt-suggestion {
font-size: 16px;
line-height: 24px;
padding: 3px 20px;
}
.tt-suggestion p {
margin: 0;
}
.tt-suggestion.tt-is-under-cursor {
background-color: #999999;
color: #FFFFFF;
}
</style>
</head>
<body>
<div class="se-example">
<input id="searchbox" type="text" class="typeahead tt-query" autocomplete="off" spellcheck="false" placeholder="Search for Book Name..."/>
</div>
<script>
$(document).ready(function(){
$('#searchbox').typeahead({
remote: 'search.php?st=%QUERY'
});
console.log("typeahead fired");
});
</script>
</body>
</html>
search.phpここ
<?php
$str = $_GET['st'];
$connection = mysqli_connect("localhost", "username", "password", "library");
$sql = "SELECT title FROM books WHERE title LIKE '%{$str}%'";
$result = mysqli_query($connection, $sql);
$array = array();
while($row = mysqli_fetch_assoc($result)) {
$array[] = $row['title'];
}
echo json_encode($array);
?>
'search.php'に達しましたか？ 'typeahead'メソッドはまったく起動していますか？ – Marcus
はい、発射したようです。 – 65535
は、プロセスが正常に機能していることを証明するために、確実にデータを返すことがわかっているクエリを置き換えようとしましたか？ –