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

一些建议：

为什么dataType= "jsop"？它似乎不是jsonp。我想你想要“json”。
也会在选项中插入cache : false。这确保了始终发出请求，并且从不满足于浏览器端缓存。
检查电话是否正在通过，如Fiddler或Charles。
你的成功会被召集吗？那里有alert()。是否被调用？
如果你有Firebug或IE8开发人员工具，你可以在alert()上放置一个断点来验证参数的值。
为什么要在网址中指定完整的主机名？昨晚我有一个奇怪的情况，自动完成，响应为空，空字符串，当我使用不同的主机名的页面和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必须符合http://json.org/的JSON标准。

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

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

修复后，您可以将源设置为字符串URL。该术语将在“术语”查询字符串中。它的工作原理!!

jquery ui自动完成数据库

7 个答案: