Question

我正在尝试使用bootsrap typeahead从sql数据库实现自动完成功能。

当我在演示中对其进行尝试时，它可以完美运行，但是当我将其放入项目中时，则无济于事。

CSS

 <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="typeahead.js"></script>

    <style>
    .typeahead {}
    .tt-menu { width:300px; }
    ul.typeahead{margin:0px;padding:10px 0px;}
    ul.typeahead.dropdown-menu li a {padding: 10px !important;  border-bottom:#CCC 1px solid;color:#FFF;}
    ul.typeahead.dropdown-menu li:last-child a { border-bottom:0px !important; }
    .bgcolor {max-width: 550px;min-width: 290px;max-height:340px;padding: 100px 10px 130px;border-radius:4px;text-align:center;margin:10px;}
    .demo-label {font-size:1.5em;color: #686868;font-weight: 500;color:#FFF;}
    .dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
        text-decoration: none;
        background-color: #1f3f41;
        outline: 0;
    }
    </style>

这是脚本和HTML代码

<div class="form-group">
<label>Srtudent Name or ID<span style="color:red;">*</span></label>
<input class="typeahead form-control" type="text" name="studentID" id="studentID" />
</div>

<script>
    $(document).ready(function () {
        $('#studentID').typeahead({
            source: function (query, result) {
                $.ajax({
                    url: "search-student.php",
                    data: 'query=' + query,
                    dataType: "json",
                    type: "POST",
                    success: function (data) {
                        result($.map(data, function (item) {
                            return item;
                        }));
                    }
                });
            }
        });
    });
</script>

这是PHP代码

<?php
    $keyword = strval($_POST['query']);
    $search_param = "{$keyword}%";
    $conn =new mysqli('localhost', 'root', '' , 'lms');

    $sql = $conn->prepare("SELECT * FROM students WHERE studentName LIKE ?");
    $sql->bind_param("s",$search_param);
    $sql->execute();
    $result = $sql->get_result();
    if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
        $countryResult[] = $row["studentName"];
        }
        echo json_encode($countryResult);
    }
    $conn->close();
?>

Answer 1

放入

<script type="text/javascript" src="typeahead.js"></script>

作为最后一个脚本，因此对于函数typeahead不会发生覆盖。（这解决了问题）

如何使用Typeahead Bootstrap和SQL实现自动完成功能？

1 个答案: