带有数据库的jquery ui自动完成

Posted 2023-02-24

【中文标题】带有数据库的jquery ui自动完成

【英文标题】：jquery ui autocomplete with database

【发布时间】：2011-02-02 00:33:05

【问题描述】：

我对 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”。

【问题讨论】：

刚刚想到； “myscript.php”是否需要发送一个“JSON 标头”（如果存在）...

看来参数没有通过 ?q= 传递，如记录的那样？？？

现在我删除了 (isset($_GET['q'])) 我在使用 $("#login_name").autocomplete( source : "/ajax/login_name.php", dataType: "json", minLength: 2, cache: false, formatItem: function(data) return data.user_login_name; , formatResult: function(data) return data.user_id; );

【参考方案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】：

一些建议：

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

【讨论】：

我使用的是此脚本的修改版本jqueryui.com/demos/autocomplete/remote-jsonp.html，如果我复制并粘贴代码，它可以完美运行。现在尝试使用修改版的jqueryui.com/demos/autocomplete/remote.html

【参考方案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 很好

【讨论】：

您使用“text/x-json”或内容类型。但我认为 json 的首选内容类型是“application/json”或“text/javascript”。这就是 jquery 1.4.2 在发送 ajax 请求时所期望的，这也是作为标准提出的。

我已添加尝试了这些标头的所有变体，但均未成功。

【参考方案4】：

如果其他人需要它：

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

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

【参考方案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>

【参考方案6】：

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

【讨论】：

顺便说一句，您需要添加 json 或 jquery json 插件才能对其进行解码（据我所知）。这里有一些建议：groups.google.com/group/jquery-en/browse_thread/thread/…

【参考方案7】：

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

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

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

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

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

【讨论】：

不确定是不是同样的问题。 @bigstylee 显示的 JSON 有双引号，而不是单引号。