jquery ui自动完成与数据库

Question

我相当新的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"}] 

能

人的后半段请告诉我哪里错了？开始变得非常沮丧。输入框只是变成“白色”，没有显示任何选项。如果我指定一个值的数组，该代码会工作。

UPDATE 我改变了代码，仍然没有运气。

$("#login_name").autocomplete({ 
    source: "/ajax/login_name.php", 
    dataType: "json", 
    minLength: 2, 
    cache: false, 
    select: function(event, ui) { 
     alert(ui); 
    } 
}); 

使用FireFox的Web开发工具，我收到一个错误“b is null”。

Answer 1

终于找到一个适合我的需要

$("#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; 
    } 
}); 

Answer 2

一些建议：

1. 为什么dataType= "jsop"？它似乎不是jsonp。我想你想要“json”。在选项中也插入cache : false。这确保了请求总是被创建，并且永远不会满足浏览器端缓存。
2. 检查电话是否正在外出，像Fiddler或Charles。
3. 你的成功是否会被称为？那里有一个alert()。它是否被调用？
4. 如果你有Firebug或IE8开发者工具，你可以在alert()上加一个断点来验证参数的值。
5. 为什么在URL中指定完整的主机名？ 昨晚我有一个奇怪的情况与自动完成响应为空，空字符串，当我使用不同的主机名为页面和Ajax请求。当我修改它以使用相同的主机名时，请求成功。实际上，由于具有相同的源策略，您应该在ajax调用的URL中根本没有主机名。

Answer 3

甲JSON晶格结构是平坦的字符串，而map预计数组或数组状结构。在使用map之前在字符串上尝试json解码。

Answer 4

是的，你确实需要的头信息为您的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"); 

和tvanfosson使得一个好点紧靠在anycase的插头

我不认为你做的Ajax调用插件一样。

如果你使用jquery-ui autocomple你应该阅读文档获取基本版本运行。你的PHP是罚款除了丢失的报头数据

Answer 5

我有一个问题，太喜欢你的解决方案。现在我修复它。问题是我的服务器返回的json包含语法错误。

在http://api.jquery.com/jQuery.getJSON/中告诉我们，如果JSON中存在某种错误，它将会自动失败。 JSON必须匹配这里的JSON标准http://json.org/。

对于我的错误是我在JSON中的字符串只包装在一个报价中。但JSON标准只接受用双引号包装的字符串。

例如。 “Hello World”不是“Hello World”

当您修复它时，您可以将源设置为字符串URL。该术语将位于“术语”查询字符串中。它的工作原理！

Answer 6

万一别人需要它：

在jQuery用户界面自动完成的文档指定查询参数使用的是“长期”而不是“Q” ......或者至少是现在。

E.g. http://www.myhost.com/myscript.php?term=someToSearchFor 

Answer 7

简单的jquery ui autocomplete，对于那些可能需要它的人。

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

?> 

HTML表单

<div id="search"> 
<form id="search-form"> 
<input id="tags" type="text" /> 
<input type="submit" value="Search" /> 
</form> 
</div>