带有数据库的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"}]

谁能告诉我哪里出错了？开始变得非常沮丧。输入框只是变成“白色”并且没有显示任何选项。如果我指定一个值数组，代码确实有效。

更新 我已将代码更改为，但仍然没有运气。

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

使用 FireFox 的 Web Developer 工具时，我收到一个错误“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”。
2. 也在选项中插入cache : false。这样可以确保始终发出请求，并且永远不会从浏览器端缓存中得到满足。
3. 使用 Fiddler 或 Charles 之类的方法检查呼叫是否正在拨出。
4. 你的成功 fn 被调用了吗？你有一个alert()。它会被调用吗？
5. 如果你有Firebug或IE8开发者工具，你可以在alert()上下断点来验证参数的值。
6. 为什么要在 URL 中指定完整的主机名？ 昨晚，当我为页面和 Ajax 请求使用不同的主机名时，我遇到了一个奇怪的自动完成情况，其中响应为空，即空字符串。当我修改它以使用相同的主机名时，请求成功了。实际上，由于相同的来源策略，您应该在 ajax 调用的 URL 中根本没有主机名。

Answer 3

是的，您确实需要 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 提出了一个很好的观点，即插头

无论如何，我认为你不会让插件调用 ajax。

如果您实际上在使用jquery-ui autocomple，您应该阅读文档以获得运行的基本版本。除了缺少标题数据之外，您的 php 很好

Answer 4

如果其他人需要它：

jQuery UI 中的自动完成文档指定要使用的查询字符串参数是 'term' 而不是 'q'...或者至少现在是这样。

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

Answer 5

简单的 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>';

 ?>

你的 html 表单

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

Answer 6

JSON 结构是一个扁平字符串，而map 需要一个数组或类似数组的结构。在使用 map 之前尝试对字符串进行 json 解码。

Answer 7

我也遇到过你这样的问题。现在我修复它。问题是我从服务器返回的 json 包含语法错误。

在http://api.jquery.com/jQuery.getJSON/ 中告诉如果JSON 中有一些错误，它将静默失败。 JSON 必须与此处的 JSON 标准匹配 http://json.org/ 。

因为我的错误是我在 JSON 中的字符串只包含在一个引号中。但是 JSON 标准只接受用双引号括起来的字符串。

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

当您修复它时，您可以将源设置为字符串 URL。该术语将在“术语”查询字符串中。它有效！