jquery — PHP мгновенный поиск в базе данных MySQL с использованием AJAX, Twitter Typeahead Fails
Я пытаюсь реализовать мгновенный поиск на html-странице, используя Twitter Typeahead, и он не отвечает, когда текст вводится в поле поиска, и в консоли chrome javascript нет ошибок.
Весь используемый код полностью упрощен, поэтому кажется странным, что это происходит.
Любая помощь будет принята с благодарностью.
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);
?>
Решение
Вот index.html, который работает, но использует версию 10.4 typeahead (https://plugins.jquery.com/typeahead.js/0.10.4/):
<html>
<head>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="typeahead.bundle.min.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: #FF0000;
}
</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(){
// Instantiate the Bloodhound suggestion engine
var source = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url:'search.php?st=%QUERY',
wildcard: '%QUERY',
filter: function (results) {
// Map the remote source JSON array to a JavaScript object array
return $.map(results, function (result) {
return {
value: result
};
});
}
}
});
// Initialize the Bloodhound suggestion engine
source.initialize();$('#searchbox').typeahead(null, {
display: 'value',
source: source.ttAdapter(),
limit:5
});
console.log("typeahead fired");
});
</script>
</body>
</html>
Другие решения
Других решений пока нет …