Bootstrap 自动完成搜索

在本节中，我们将使用Bootstrap Typeahead JS进行动态自动完成搜索。提前输入也可以称为自动建议或自动完成。它是一种用于语言预测的工具。许多搜索界面都使用此工具。当客户在搜索栏中键入内容时，他们将获得一些建议。当用户在搜索栏中键入内容时，Typeahead会提供预测。

现代的Web表单具有非常流行的搜索工具，即typeahead输入字段。 Typeahead通常用于改善用户体验。该工具在用户搜索内容或填写表单时查看用户输入的文本。基于这些内容，Typeahead向用户提供提示和可能选择的列表。搜索可以是任何类型。当我们使用Typeahead时，我们将减少潜在的错误，并且还可以节省时间，因为在使用Typeahead时，用户的拼写错误将更少。

首先，我们将创建 html 布局。我们将添加 JQuery 和在Ajax.html文件中提前输入Bootstrap 。如果尝试在输入框上写一些内容，则可以进行动态自动完成搜索。通过使用Ajax请求是可能的。因此，将首先使用以下代码创建ajax.html文件:

ajax.html:

<html lang="en">
<head>
    <title> Example of Bootstrap Typeahead with Ajax </title>  
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>  
</head>
<body>
<div class="row">
    <div class="col-md-12 text-center">
        <br/>
        <h1> Example of Dynamic Autocomplete search using Bootstrap Typeahead JS</h1>   
            <input class="typeahead form-control" style="margin:0px auto;width:300px;" type="text">
    </div>
</div>
<script type="text/javascript">
    $('input.typeahead').typeahead({
        source:  function (query, process) {
        return $.get('/ajaxpro.php', { query: query }, function (data) {
                console.log(data);
                data = $.parseJSON(data);
                return process(data);
            });
        }
    });
</script>
</body>
</html>

现在我们的示例需要 JSON 数据。我们将通过创建一个新页面并根据Ajax请求获得此功能。因此，在下面的示例中，我们将再创建一页ajaxpro.php文件。之后，我们将添加以下代码:

ajaxpro.php:

<?php
    
    define (DB_USER, "root");
    define (DB_PASSWORD, "root");
    define (DB_DATABASE, "learn");
    define (DB_HOST, "localhost");
    $mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);
    $sql = "SELECT items.title FROM items 
            WHERE title LIKE '%".$_GET['query']."%'
            LIMIT 10"; 
    $result = $mysqli->query($sql);
    
    s$json = [];
    while($row = $result->fetch_assoc()){
         $json[] = $row['title'];
    }
    echo json_encode($json);

我们的以上代码已准备就绪，可以运行。运行此代码时，将获得以下输出:

Bootstrap 自动完成搜索_https://bianchenghao6.com_【Bootstrap 教程】_第1张

Bootstrap 网格

Bootstrap 表单