php 使用 json 和 ajax 自动完成 JQuery UI
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11852282/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery UI autocomplete with json and ajax
提问by hereiam
I've seen a lot of questions dealing with passing an array with label and value properties via JSON, but not much about passing strings. My problem is that I cannot seem to get my autocomplete to fill. I ran a dump function and am getting these sample values passed via JSON to the autocomplete:
我见过很多关于通过 JSON 传递带有标签和值属性的数组的问题，但关于传递字符串的问题并不多。我的问题是我似乎无法让我的自动完成填充。我运行了一个转储函数，并将这些示例值通过 JSON 传递到自动完成：
0: 23456
1: 21111
2: 25698
Here's some code:
这是一些代码：
$("#auto_id").autocomplete( {
source: function(request,response) {
$.ajax ( {
url: "fill_id.php",
data: {term: request.term},
dataType: "json",
success: function(data) {
//what goes here?
}
}) }
});
Here is fill_id.php:
这里是fill_id.php：
$param = $_GET['term'];
$options = array();
$db = new SQLite3('database/main.db');
$results = $db->query("SELECT distinct(turninId) FROM main WHERE turninid LIKE '".$param."%'");
while ($row_id = $results->fetchArray()) {
$options[] = $row_id['turninId'];
}
echo json_encode($options);
My autocomplete remains blank. How do I change my JSON array to fill it? Or what do I include in my ajax success function?
我的自动完成仍然空白。如何更改我的 JSON 数组以填充它？或者我的 ajax 成功函数中包含什么？
回答by con
You can stick very much to the remote demo of jQuery UI's Autocomplete: http://jqueryui.com/resources/demos/autocomplete/remote-jsonp.html
您可以非常坚持 jQuery UI 的自动完成的远程演示：http: //jqueryui.com/resources/demos/autocomplete/remote-jsonp.html
To get your results into the autocompleted list, you need to put a object with a label and a value to the response parameter (which is actually a function) inside your ajax success function:
要将您的结果放入自动完成列表中，您需要将一个带有标签和值的对象放入 ajax 成功函数中的响应参数（实际上是一个函数）中：
source: function( request, response ) {
$.ajax({
url: "fill_id.php",
data: {term: request.term},
dataType: "json",
success: function( data ) {
response( $.map( data.myData, function( item ) {
return {
label: item.title,
value: item.turninId
}
}));
}
});
}
But this will only work if you modify yor fill_id.php a bit:
但这只有在您稍微修改您的 fill_id.php 时才有效：
// escape your parameters to prevent sql injection
$param = mysql_real_escape_string($_GET['term']);
$options = array();
// fetch a title for a better user experience maybe..
$db = new SQLite3('database/main.db');
$results = $db->query("SELECT distinct(turninId), title FROM main WHERE turninid LIKE '".$param."%'");
while ($row_id = $results->fetchArray()) {
// more structure in data allows an easier processing
$options['myData'][] = array(
'turninId' => $row_id['turninId'],
'title' => $row_id['title']
);
}
// modify your http header to json, to help browsers to naturally handle your response with
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');
echo json_encode($options);
Of course, when you don't have a title or anything in your table, you can also just leave your response as it is and repeat the id in your success callback. Important is, that you fill your responsefunction in the autocomplete with a value/item pair:
当然，当您的表格中没有标题或任何内容时，您也可以保留您的回复原样并在您的成功回调中重复 id。重要的是，您response在自动完成中使用值/项目对填充您的函数：
// this will probably work without modifying your php file at all:
response( $.map( data, function( item ) {
return {
label: item,
value: item
}
}));
edit: updated the reference link to the new jquery UI's autocomplete ui
编辑：更新了新 jquery UI 的自动完成 ui 的参考链接
