-1

作为实习生，我正在为一个研究所制作一个门户网站。

目前正在制作电话簿上的模块。我的导师要求我在输入员工姓名的文本字段上应用 AJAX。我通过 phpMyAdmin 使用 Dreamweaver CS4 和 MySQL 数据库。

我的问题是：如何在文本字段上应用 AJAX，以便在输入单个字符时整个员工姓名列表显示为列表。它和谷歌一样，它提供建议。我进行了很多搜索，但没有得到任何代码。此外，Dreamweaver 的功能非常有限，使用它变得越来越困难。

4

2 回答 2

0

如果您使用 Twitter Bootstrap，我从另一个问题中部分窃取了一个很好的解决方案，可以帮助您解决问题（如果您还没有集成，请相信我，它会让您的生活更轻松）：

因此，这是名称文本字段的代码：

<form class="navbar-search">
    <input type="text" id="search" class="search-query span3 pull-right" placeholder="Search" data-provide="typeahead">
    <div class="icon-search"></div>
</form>

接下来，您将需要一些 jQuery 代码来执行 AJAX 部分：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.0.min.js"><\/script>')</script>

<!-- Bootstrap jQuery plugins compiled and minified -->
<script src="js/bootstrap.min.js"></script>

<!-- Bootstrap JS Code -->
<script>
    $(document).ready(function(){
        $('#search').typeahead({
            source: function(query, process) {
                $.ajax({
                    url: 'database.php'
                    type: 'POST';
                    data: 'query=' + query;
                    dataType: 'JSON';
                    async: true;
                    success: function(data) {
                        process(data);
                    }
                });
            }
        });
    });
</script>

最后，您需要创建 database.php 它将搜索您的数据库并将值返回到您的搜索栏：

<?php

if (isset($_POST['query'])) {
    // Connect to database
    mysql_connect('[database url]','[username]','[password]');
    mysql_select_db('[database name]');

    // Retrieve the query
    $query = mysql_real_escape_string($_POST['query']);

    // Search the database for all similar items
    $sql = mysql_query("SELECT * FROM names WHERE name LIKE '%{$query}%'");
    $array = array();

    while ($row = mysql_fetch_assoc($sql)) {
        $array[] = $row['name'];
    }

    // Return the json array
    echo json_encode($array);

}

?>

链接到原始问题。

于 2013-07-24T06:56:37.290 回答
0

我想这两个链接可能会帮助你实现你想要的。http://beski.wordpress.com/2009/11/20/jquery-php-mysql-ajax-autocomplete/。 http://jqueryui.com/autocomplete/

于 2013-07-24T06:45:02.903 回答