Question

我正在尝试实施一个搜索栏，在您输入时会显示一些建议的文字。我正在关注本教程http://mycodde.blogspot.com/2013/12/typeaheadjs-autocomplete-tutorial-ajax.html，但我似乎无法做到正确。每当我输入文本时，它都不会显示某些文本。有什么我做错了吗？

我的index.html

<!DOCTYPE>
<html lang="en">

<head>
    <title>Typeahead.js Tutorial with Mysql Database</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="generator" content="Geany 1.23.1" />
</head>
<link href="bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="typeahead.min.js"></script>
<script src="http://cdn.jsdelivr.net/typeahead.js/0.9.3/typeahead.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<style>
.tt-query,
.tt-hint {
    width: 396px;
    height: 30px;
    padding: 8px 12px;
    font-size: 24px;
    line-height: 30px;
    border: 2px solid #ccc;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    outline: none;
}

.tt-query {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: #999
}

.tt-dropdown-menu {
    width: 422px;
    margin-top: 12px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;
}

.tt-suggestion.tt-is-under-cursor {
    color: #fff;
    background-color: #0097cf;

}
</style>
<script>
$(document).ready(function(){
    $("#search").typeahead({
        name : 'sear',
        remote: {
            url : 'connection.php?query=%QUERY'
        }

    });
});
</script>
<body>
    <input type="text" name="search" id="search">
</body>

</html>

我的connection.php

<?php
$con = new mysqli("localhost","root","","lab");

$result = $con->query("SELECT fname,lname FROM members LIMIT 0,10");
    while ($row = $result->fetch_object()){
         $user_arr[] = $row->fname;
         $user_arr2[] = $row->lname;
     }
     $result->close();
     echo json_encode($user_arr2);
?>

具有自动填充或预先输入的搜索栏

0 个答案: