堆栈内存溢出
  繁体   English   中英

PHP使用AJAX即时搜索MySQL数据库，Twitter Typeahead失败

[英]PHP Instant Search of MySQL Database using AJAX, Twitter Typeahead Fails

 原文  2016-05-03 16:47:16  8   1    php/ jquery/ ajax/ typeahead

问题描述

我正在尝试使用Twitter Typeahead在html页面上实现即时搜索，当在搜索框中键入文本时，它没有响应，并且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);
?>

1 个解决方案

解决方案1
 0  2016-05-03 23:18:15

这是可以使用的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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用PHP即时搜索 ajax，php和twitter的引导程序提前输入 使用全文而不是LIKE PHP MySQL进行即时搜索 使用Twitter提前使搜索栏工作 Ajax 即时通讯使用 PHP 使用php搜索mysql数据库 Twitter预先输入mysql源代码 带单选按钮过滤的PHP + MYSQL即时搜索 PHP jquery数据库即时搜索没有自动完成的形式 Twitter Typeahead结果回显到页面，但未返回到搜索框PHP
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM