Question

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

Table: payees
+----------+--------------+---------------+
| payee_id | payee_name   | payee_contact |
+----------+--------------+---------------+
|        1 | John Smith   | 09045544211   |
|        2 | Chen Lou     | 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;
?>

在Bootstrap中使用typeahead

1 个答案: