jquery ui autocomplete with database

php jquery json user-interface autocomplete

2022-08-30 22:10:17

我对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开发人员工具，我收到错误“b为null”。

答案 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;
  }
});

答案 2

一些建议：

为什么？它似乎不是 jsonp。我想你想要“json”。dataType= "jsop"
在选项中也插入 a。这可确保始终发出请求，并且永远不会从浏览器端缓存中满足请求。cache : false
检查电话是否发出，使用小提琴手或查尔斯之类的东西。
你的成功fn被叫到了吗？你有一个。它是否被调用？alert()
如果您有 Firebug 或 IE8 开发人员工具，则可以在上放置一个断点来验证参数的值。alert()
为什么要在 URL 中指定完整的主机名？昨晚，当我对页面和Ajax请求使用不同的主机名时，我在自动完成时遇到了一个奇怪的情况，其中响应为空，空字符串。当我将其修改为使用相同的主机名时，请求成功。实际上，由于具有相同的源策略，因此在 ajax 调用的 URL 中应该根本没有主机名。