在 Bootstrap 中使用预输入

Question

我是新手。我想为我的 Web 应用程序使用内置的 bootstrap-typeahead.js 文件，以便在用户键入文本框时自动显示选项。我已经下载了使用 typeahead 插件的示例代码。只需将数据设置为静态即可。但我希望从名为“payees”的表的数据库中动态获取所有数据，如下所示：

表：收款人 +------------+--------------+----------------+ |收款人 ID |收款人姓名 |收款人联系方式 | +------------+--------------+----------------+ | 1 |约翰·史密斯 | 09045544211 | | 2 |陈楼 | 09093457851 | +------------+--------------+----------------+

我想使用 typahead 将文本框中的 payee_name 列表显示为用户类型。 我已经从网上学习了一些关于如何使用 jquery ajax 从数据库中获取数据的教程。到目前为止，我一直在尝试使用名为 autocomplete.php 和 data.php 的两个文件来显示数据库中的数据

这是我一直在处理的代码：

autocomplete.php

<input type="text" class="typeahead" data-provide="typeahead" autocomplete="off" />

<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>`
<script src="js/bootstrap-typeahead.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('input.typeahead').typeahead({
        source: function (query, process) {
        $.ajax({
            url: 'data.php',
            type: 'POST',
            dataType: 'JSON',
            data: 'query=' + query,
            success: function(data) {
                console.log(data);
                process(data);
            }
        });
        }
    });
});
</script>

data.php

<?php

$mysqli = new mysqli("localhost", "root", "", "disbursements");

$query = 'SELECT payee_name FROM payees';

if(isset($_POST['query'])){

// Now set the WHERE clause with LIKE query
$query .= ' WHERE payee_name LIKE "%'.$_POST['query'].'%"';
}

$return = array();

if($result = $mysqli->query($query)){
// fetch object array
   while($obj = $result->fetch_object()) {
      $return[] = $obj->payee_name;
   }
   // free result set
   $result->close();
}

// close connection
$mysqli->close();

$json = json_encode($return);
print_r($json);
?>

但是这些代码不起作用，因为我的 php 脚本似乎没有返回任何数据以显示在我的文本框中。有人可以帮我解决我的代码有什么问题吗？谢谢

Answer 1

试试这个：

$('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('data.php', { query: query }, function (data) {
            return process(data.options);
        });
    }
});



<?php
    $mysqli = new mysqli("localhost", "root", "", "disbursements");
    $query = 'SELECT payee_name FROM payees';

    if (isset($_POST['query'])) {
        // Now set the WHERE clause with LIKE query
        $query.= ' WHERE payee_name LIKE "%' . $_POST['query'] . '%"';
    }

    $return = array();

    if ($result = $mysqli->query($query)) {
        // fetch object array        
        while ($obj = $result->fetch_object()) {
            $return['options'][] = $obj->payee_name;
        }       
        // free result set        
        $result->close();
    }

    // close connection        
    $mysqli->close();
    $json = json_encode($return);
    echo $json;
?>