在 jquery 自动完成、javascript、json 和 php 中使用 id 和 value

Question

我正在寻找一些代码的简单示例，该示例显示如何使用带有 id 和值、json 和 php 的 jquery 自动完成功能，但我找不到任何代码。基本上我在数据库中有一个员工姓名列表，他们有一个 id 和一个名字。我想显示名称，但在我的表单提交中的隐藏字段中使用 id。我想通过 php 和 json ajax 提供名称列表。我还想使用必须输入 3 个字符才能显示自动完成功能的功能，因为它是一个非常长的员工姓名列表。不确定是否必须将这 3 个字符作为参数传递给 php。

我是菜鸟，所以非常感谢一个简单的例子。

谢谢

Answer 1

在 jQuery UI 上有很好的例子： http://jqueryui.com/demos/autocomplete/#remote

单击示例下方的查看源代码按钮以查看 Javascript 方面的内容。请注意“source”（这是传递结果的 PHP 脚本的路径）和“minLength”的参数。将 minLength 属性设置为 3 将处理您问题的第二部分。

就远程而言，结果需要采用 JSON 格式，以便您可以从数据库中查询数据，将其作为 PHP 关联数组获取，然后使用 json_encode() 方法将其转换为自动完成插件可以读取。他们示例中的自动完成实现将查询字符串变量“term”发送到包含用户输入的搜索字符串的源文件。

此示例期望来自服务器的 JSON 结果采用以下格式： [ { "id": "Branta hrota", "label": "Pale-bellied Brent Goose", "value": "Pale-bellied Brent Goose" }, ...]

所以 PHP 源页面可以使用如下代码来传递结果：

// source.php (or whatever path you used for the autocomplete "source" setting)
// Sanitize your input!
$term = mysql_real_escape_string( $_GET['term'] );

$results = mysql_query( "SELECT * FROM employees WHERE name LIKE '%{$term}%' "); // Grab your data

$output_array = new array();

while ( $row = mysql_fetch_assoc( $results ) ) {
    $output_array[] = array( 
        'id' => $row['id']
        , 'label' => $row['name']
        , 'value' => $row['name']
    );
}

// Print out JSON response
echo json_encode( $output_array );

这都是未经测试的伪代码，但它应该为您指明正确的方向。