php jquery ui 自动完成数据库
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2537721/
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 database
提问by bigstylee
I fairly new to JQuery and perhaps trying to achieve something that might be abit harder for a beginner. However I am trying to create an autocomplete that sends the current value to a PHP script and then returns the necessary values.
我对 JQuery 相当陌生，也许试图实现一些对初学者来说可能有点困难的东西。但是，我正在尝试创建一个自动完成功能，将当前值发送到 PHP 脚本，然后返回必要的值。
Here is my Javascript code
这是我的 Javascript 代码
$("#login_name").autocomplete({
source: function(request, response) {
$.ajax({
url: "http://www.myhost.com/myscript.php",
dataType: "jsonp",
success: function(data) {
alert(data);
response($.map(data, function(item) {
return {
label: item.user_login_name,
value: item.user_id
}
}))
}
})
},
minLength: 2
});
And here is the the last half of "myscript.php"
这是“myscript.php”的后半部分
while($row = $Database->fetch(MYSQLI_ASSOC))
{
foreach($row as $column=>$val)
{
$results[$i][$column] = $val;
}
$i++;
}
print json_encode($results);
Which produces the following output
产生以下输出
[{"user_id":"2","user_login_name":"Name1"},{"user_id":"3","user_login_name":"Name2"},{"user_id":"4","user_login_name":"Name3"},{"user_id":"5","user_login_name":"Name4"},{"user_id":"6","user_login_name":"Name5"},{"user_id":"7","user_login_name":"Name6"}]
Can anyone tell me where I am going wrong please? Starting to get quite frustrated. The input box just turns "white" and no options are shown. The code does work if I specify an array of values.
谁能告诉我我哪里出错了？开始变得相当沮丧。输入框只是变成“白色”，没有显示任何选项。如果我指定一个值数组，代码确实有效。
UPDATEI have changed the code to and still having no luck.
更新我已将代码更改为仍然没有运气。
$("#login_name").autocomplete({
source: "/ajax/login_name.php",
dataType: "json",
minLength: 2,
cache: false,
select: function(event, ui) {
alert(ui);
}
});
Using FireFox's Web Developer tool, I am getting an error "b is null".
使用 FireFox 的 Web Developer 工具，我收到错误“b 为空”。
回答by bigstylee
Finally found the solution that fits my needs
终于找到了适合我需求的解决方案
$("#login_name").autocomplete({
source: function(request, response){
$.post("/ajax/login_name.php", {data:request.term}, function(data){
response($.map(data, function(item) {
return {
label: item.user_login_name,
value: item.user_id
}
}))
}, "json");
},
minLength: 2,
dataType: "json",
cache: false,
focus: function(event, ui) {
return false;
},
select: function(event, ui) {
this.value = ui.item.label;
/* Do something with user_id */
return false;
}
});
回答by Cheeso
some suggestions:
一些建议：
- Why
dataType= "jsop"? It doesn't appear to be jsonp. I think you want "json". - insert a
cache : falsein the options, as well. This insures the request is always made, and never satisfied from browser-side cache. - check if the call is going out, with something like Fiddler or Charles.
- does your success fn get called? You have a
alert()there. Does it get invoked? - if you have Firebug or the IE8 developer tools, you can put a breakpoint on the
alert()to verify the value of the parameters. - Why specify the full hostname in the URL? Last night I had an odd situation with autocomplete where the response was null, the empty string, when I used a different hostname for the page and the Ajax request. When I modified it to use the same hostname, the request succeeded. Actually because of the same origin policy, you should have no hostname at all in the URL for the ajax call.
- 为什么
dataType= "jsop"？它似乎不是 jsonp。我想你想要“json”。 cache : false在选项中也插入一个。这确保请求总是被发出，并且永远不会从浏览器端缓存中得到满足。- 用 Fiddler 或 Charles 之类的东西检查电话是否出去了。
- 你的成功 fn 会被调用吗？你有一个
alert()。它会被调用吗？ - 如果您有 Firebug 或 IE8 开发人员工具，您可以在 上放置一个断点
alert()来验证参数的值。 - 为什么要在 URL 中指定完整的主机名？昨晚，当我为页面和 Ajax 请求使用不同的主机名时，我遇到了自动完成的奇怪情况，其中响应为空，空字符串。当我修改它以使用相同的主机名时，请求成功。实际上，由于同源策略，ajax 调用的 URL 中根本不应该包含主机名。
回答by CodeReaper
In case anyone else needs it :
万一其他人需要它：
The documentation for autocomplete in jQuery UI specifies the querystring parameter to use is 'term' and not 'q'... or least it does now.
jQuery UI 中自动完成的文档指定要使用的查询字符串参数是“ term”而不是“q”……或者至少现在是这样。
E.g. http://www.myhost.com/myscript.php?term=someToSearchFor
回答by mcgrailm
Yes you do need header info for your json
是的，您确实需要 json 的标题信息
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" );
header("Cache-Control: no-cache, must-revalidate" );
header("Pragma: no-cache" );
header("Content-type: text/x-json");
and tvanfossonmakes a good point abut the the plug
和tvanfosson在插头旁边做了一个很好的点
in anycase I don't think you make the ajax call the plugin does.
无论如何，我认为您不会调用插件所做的 ajax 调用。
if you are infact using jquery-ui autocompleyou should read over the documentation get a basic version running. your php is fine aside from the missing header data
如果您实际上使用jquery-ui 自动完成，您应该通读文档以获得运行的基本版本。除了缺少标题数据之外，您的 php 还可以
回答by TenTen Peter
Simple Jquery ui autocomplete, for those who might need it.
简单的 Jquery ui 自动完成功能，适合可能需要的人。
//select data from the table
$search = $db->query('SELECT Title from torrents');
//then echo script tags and variables with php
<?php echo '<script type="text/javascript">
$(function() {
var availableTags = [';
foreach ($search as $k) {
echo '"'.$k['Title'].'",';
}
echo '];
$( "#tags" ).autocomplete({
minLength:2, //fires after typing two characters
source: availableTags
});
});
</script>';
?>
your html form
你的 html 表单
<div id="search">
<form id="search-form">
<input id="tags" type="text" />
<input type="submit" value="Search" />
</form>
</div>
回答by pinaki
回答by panawat wongkleaw
I had a problem like you too. And now I fix it. The problem is my json that return from my server contain a syntax error.
我也有和你一样的问题。现在我修好了。问题是我的服务器返回的 json 包含语法错误。
In http://api.jquery.com/jQuery.getJSON/tells that if there are some error in JSON, it will fail silently. The JSON must match the JSON standard here http://json.org/.
在http://api.jquery.com/jQuery.getJSON/ 中告诉，如果 JSON 中存在一些错误，它将静默失败。JSON 必须与http://json.org/中的 JSON 标准匹配。
For my error is my string in JSON is wrapping in only one quote. But the JSON standard accept only string that wrap in double quotes.
因为我的错误是我在 JSON 中的字符串只包含在一个引号中。但是 JSON 标准只接受用双引号括起来的字符串。
eg. "Hello World" not 'Hello World'
例如。“你好世界”不是“你好世界”
When you fix it you can set the source as string URL. The term will be in "term" query string. And it works!!
修复它时，您可以将源设置为字符串 URL。该术语将在“term”查询字符串中。它有效！！
