jquery ui自动完成数据库
我是JQuery的新手，也许还想尝试为初学者创造一些可能更难实现的东西。 但是，我正在尝试创建一个自动完成，将当前值发送到PHP脚本，然后返回必要的值。
这是我的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 }); 这是“myscript.php”的后半部分
while($row = $Database->fetch(MYSQLI_ASSOC)) { foreach($row as $column=>$val) { $results[$i][$column] = $val; } $i++; } print json_encode($results);
这产生以下输出
[{"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"}]
谁能告诉我哪里出错了？ 开始变得非常沮丧。 输入框只是变为“白色”，没有显示任何选项。 如果我指定一个值数组，代码确实有效。
更新我已将代码更改为仍然没有运气。
$("#login_name").autocomplete({ source: "/ajax/login_name.php", dataType: "json", minLength: 2, cache: false, select: function(event, ui) { alert(ui); } });
使用FireFox的Web Developer工具，我收到错误“b为null”。
终于找到了符合我需求的解决方案
$("#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; } });
一些建议：
- 为什么
dataType= "jsop"？ 它似乎不是jsonp。 我想你想要“json”。 - 在选项中插入
cache : false。 这确保了始终发出请求，并且从不满足于浏览器端缓存。 - 用Fiddler或Charles等方法检查通话是否结束。
- 你的成功会被召集吗？ 你有一个
alert()。 是否被调用？ - 如果你有Firebug或IE8开发人员工具，你可以在
alert()上放置一个断点来validation参数的值。 - 为什么要在URL中指定完整的主机名？ 昨晚我有一个奇怪的情况，自动完成，响应为空，空字符串，当我使用不同的主机名为页面和Ajax请求。 当我修改它以使用相同的主机名时，请求成功。 实际上由于原始策略相同，您在ajax调用的URL中根本没有主机名。
是的，你确实需要json的标题信息
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" ); header("Last-Modified: " . gmdate( "D, d MYH:i:s" ) . "GMT" ); header("Cache-Control: no-cache, must-revalidate" ); header("Pragma: no-cache" ); header("Content-type: text/x-json");
和tvanfosson在塞子上做了一个好点
在任何情况下，我不认为你做插件的ajax调用。
如果你是使用jquery-ui自动填充，你应该阅读文档获得运行的基本版本。 除了丢失的标题数据之外，你的php还没问题
万一其他人需要它：
jQuery UI中自动完成的文档指定要使用的查询字符串参数是“ term ”而不是“q”…或者至少现在这样做。
Eg http://www.myhost.com/myscript.php?term=someToSearchFor
简单的Jquery ui自动完成，适合那些可能需要它的人。
//select data from the table $search = $db->query('SELECT Title from torrents'); //then echo script tags and variables with php $(function() { var availableTags = ['; foreach ($search as $k) { echo '"'.$k['Title'].'",'; } echo ']; $( "#tags" ).autocomplete({ minLength:2, //fires after typing two characters source: availableTags }); }); '; ?>
你的HTML表单
JSON strcuture是一个扁平字符串，而map需要一个数组或数组结构。 在使用map之前尝试对字符串进行json解码。
我也有像你这样的问题。 现在我解决它。 问题是我的json从我的服务器返回包含语法错误。
在http://api.jquery.com/jQuery.getJSON/中告诉我，如果JSON中有一些错误，它将无声地失败。 JSON必须符合JSON标准http://json.org/ 。
因为我的错误是我在JSON中的字符串只包含一个引号。 但是JSON标准只接受用双引号括起来的字符串。
例如。 “Hello World”不是“Hello World”
修复它时，您可以将源设置为字符串URL。 该术语将在“术语”查询字符串中。 它的工作原理!!