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

2022-01-05 00:00:00 database autocomplete jquery php

我目前正在处理一个项目，在该项目中我需要一个自动完成表单从 db 文件中调用其信息.我看过很多关于 jquery 自动完成表单的教程，但我不知道如何调用 db 文件来填充列表.

I am currently working on a project in which I need to have an autocomplete form call its information from a db file. I have seen many tutorials on jquery autocomplete forms, but I do not know how to call a db file to populate the list.

我在 PHP 工作.目前，代码表示一个简单的下拉框，它调用 db 文件进行填充.

I am working in PHP. Currently the code represents a simple drop down box that is calling on the db file for population.

    <?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>';
?>

任何帮助都会很棒！

推荐答案

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

I recently have used this library for autocompletion - http://www.devbridge.com/projects/autocomplete/jquery/ So here is brief script based on yours:

<?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>
<?}?>

相关文章