jquery ui自动完成与数据库

我相当新的JQuery，也许试图实现一些初学者可能会更难的东西。不过，我正尝试创建一个自动完成功能，将当前值发送给PHP脚本，然后返回必要的值。jquery ui自动完成与数据库

这里是我的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”。

来源

2010-03-29 bigstylee

只是有一个想法; “myscript.php”需要发送一个“JSON头”（如果存在这样的东西）... – bigstylee 2010-03-29 12:26:23

它似乎没有得到通过？q =的传递参数？ – bigstylee 2010-03-29 13:33:33

现在我已经删除了（isset（$ _ GET ['q']））当我使用 $（“＃login_name”）时，自动完成了“undefined”选项的自动完成。{//ajax /login_name.php”，数据类型： “JSON”，的minLength：2，缓存：假， formatItem：功能（数据）{ \t返回data.user_login_name; }， formatResult：功能（数据）{ \t return data.user_id; } }）; – bigstylee 2010-03-29 13:36:26

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

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

来源

2010-03-29 16:17:30 bigstylee

一些建议：

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

来源

2010-03-29 12:31:23 Cheeso

我正在使用这个脚本http://jqueryui.com/demos/autocomplete/remote-jsonp.html的修改版本，如果我复制并粘贴代码，它完美的作品。现在尝试使用http://jqueryui.com/demosplete/remote.html – bigstylee 2010-03-29 13:22:13

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

来源

2010-03-29 12:32:56 pinaki

btw的修改版本，您将需要添加json或jquery json插件来解码（据我所知）。这里有一些指针：http://groups.google.com/group/jquery-en/browse_thread/thread/c76653b2687a363d?pli=1 – pinaki 2010-03-29 12:35:31

是的，你确实需要的头信息为您的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是罚款除了丢失的报头数据

来源

2010-03-29 12:36:12 mcgrailm

您使用“text/x-json”或内容类型。但我认为json的首选内容类型是“application/json”或“text/javascript”。这就是jQuery 1.4.2在发送json请求时所期望的，这就是标准提出的。 – Cheeso 2010-03-29 13:09:28

我已经添加尝试所有这些标题的变体，但没有成功。 – bigstylee 2010-03-29 13:16:47

非常感谢Cheeso – mcgrailm 2010-03-29 13:27:46

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

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

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

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

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

来源

2011-04-12 06:52:18

不知道这是同一个问题。 @ bigstylee显示的JSON有双引号，而不是单引号。 – OnaBai 2012-11-24 23:35:33

万一别人需要它：

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

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

来源

2011-07-21 12:32:51 CodeReaper

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

来源

2014-07-12 20:46:51

jquery ui自动完成与数据库

回答

相关问题