由数据库填充的自动完成表单?

Posted

技术标签:

【中文标题】由数据库填充的自动完成表单?【英文标题】:Autocomplete form populated by a database? 【发布时间】:2011-08-28 04:06:39 【问题描述】:

我目前正在做一个项目,我需要一个自动完成表单从 db 文件中调用其信息。看过很多关于jquery自动完成表单的教程,但是不知道怎么调用db文件来填充列表。

我正在使用 php。目前,该代码表示​​一个简单的下拉框,它正在调用 db 文件以进行填充。

    <?php
    global $wpdb;
    $depts = $wpdb->get_results( "SELECT * FROM departments ORDER BY department_name ASC" );
    echo '<select>';

    foreach($depts as $row) 
        echo '<option name="select_dept" value="'.$row->department_id.'">'.$row->department_name.'</option>';
    
    echo '</select>';
?>

任何帮助都会很棒!

【问题讨论】:

【参考方案1】:

我最近使用这个库进行自动补全 - http://www.devbridge.com/projects/autocomplete/jquery/ 所以这里是基于你的简短脚本:

<?php

$query = isset($_GET['query']) ? $_GET['query'] : FALSE;

if ($query) 
    global $wpdb;
    // escape values passed to db to avoid sql-injection
    $depts = $wpdb->get_results( "SELECT * FROM departments WHERE department_name LIKE '".$query."%' ORDER BY department_name ASC" );

    $suggestions = array();
    $data = array();
    foreach($depts as $row) 
        $suggestions[] = $row->department_name;
        $data[] = $row->department_id;
    
    $response = array(
        'query' => $query,
        'suggestions' => $suggestions,
        'data' => $data,
    );
    echo json_encode($response);
 else 
?>
<html>
<body>
<input type="text" name="" id="box" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://www.devbridge.com/projects/autocomplete/jquery/local/scripts/jquery.autocomplete.js"></script>

<script type="text/javascript">

$(document).ready(function()
    $('#box').autocomplete( 
        serviceUrl:'/',
        // callback function:
        onSelect: function(value, data) alert('You selected: ' + value + ', ' + data); ,
    ); 
);
</script>
</body>
<html>
<??>

【讨论】:

【参考方案2】:

请按照这个写得很好的教程

http://www.nodstrum.com/2007/09/19/autocompleter/

【讨论】:

感谢您的快速回复!但是,我正在寻找一种“更便宜”的方法,只需在同一页面中使用 javascript 和 php 并调用 db 文件。 @captainrad - 完全没有问题 - 但我不确定你会得到多少“便宜” 不要点击那个链接。浏览器劫持!【参考方案3】:

JQuery UI 包含一个自动完成功能,尽管您仍然需要编写一个 PHP 脚本来返回要添加到控件的信息,就像通过 AJAX 完成的一样。如果您知道如何在 PHP 中连接到数据库、查询它并返回结果列表 - 那么您将不会遇到任何问题。 JQuery 让 AJAX 变得非常简单。

根据您的字段/数据集的复杂程度 - 并假设它不是数以百万计的未索引记录,我会满足于从以下位置自动完成:

SELECT thing WHERE thing LIKE '".$query."%'

因此,如果您正在搜索食物……查询“CA”将提取 CArrot、CAbbage 和 CAuliflower。如果您在 LIKE 的开头添加一个 %,您可以获得包含您的查询的结果,而不是仅仅以它开头。

您的用户点击的页面将包含 JQuery 部分,该部分既发送请求又根据结果创建自动完成效果,以及一个非常简单、单独的 PHP 脚本,AJAX 请求点击该脚本将返回潜在的“匹配”。

看看Autocomplete demos on JQuery UI

【讨论】:

以上是关于由数据库填充的自动完成表单?的主要内容,如果未能解决你的问题,请参考以下文章

网页禁用表单的自动完成功能禁用密码自动填充autocomplete

使用自动填充表单控件(自动完成属性)使表单填写更快

如何禁止表单用户名,密码自动填充

自动填充2从1个自动完成输入表单输入,以查找代码和价格

使用自动完成填充表单时,Javascript 不启用按钮

如果表单有超过 200 个输入字段,则自动填充/自动完成不起作用