Jquery自动完成文本框ajax调用问题答案

【问题标题】：Jquery auto complete text box ajax call issueJquery自动完成文本框ajax调用问题
【发布时间】：2012-01-31 00:03:09
【问题描述】：

我正在使用 jquery 和 ajax 构建一个自动完成文本字段，就像谷歌搜索栏一样。应该在 keyup 上触发 ajax 调用，但它不起作用。请注意，当我在我的 php 文件中手动输入变量时，它工作正常。所以问题必须来自我的ajax“调用”，但我无法弄清楚。希望有人可以提供帮助。预先感谢您的回复。干杯。马克。

我的 HTML：

<input id="recherche" type='text' placeholder="je recherche">
<div id="resultat"></div>

我的 JS：

$('#recherche').keyup(function() {
    var recherche = $(this).val();
    var ajaxData = "recherche=" + recherche;

    $.ajax({
        type: "POST",
        url: "php/reherche.php",
        data: ajaxData,
        success: function(retour) { // si l'appel a bien fonctionné
            $('#resultat').html(retour);

        }
    });

});

我的 CSS：

#resultat{
    width:300px;
    height:300px;
    border:1px solid blue;}

我的 PHP：

<?php
header('Content-Type: text/html; charset=utf-8');
require("connect.inc.php");
mysql_set_charset('utf8');

$recherche = mysql_real_escape_string($_POST['recherche']);

$result = mysql_query("SELECT LOC_VKUP FROM T_LOC WHERE LOC_VKUP LIKE '%$recherche%'");

while($row=mysql_fetch_assoc($result)){
    echo '<div id="result">'.$row['LOC_VKUP'].'</div>'; 
}
?>

【问题讨论】：

你试过用控制台调试吗？你的 PHP 脚本返回了什么？
我是开发新手，如何使用控制台进行调试。我正在使用 textWrangler。购买当我在我的 php 文件中手动输入 var $recherche 时查询正确执行的方式。
谷歌浏览器有一个内置的调试器，你可以通过按 F12 来访问。 Firefox 需要使用 F12 打开的 firebug 插件。至于使用这些调试工具，恐怕超出了这个评论框的范围，所以可能会发布一个现场示例或 PHP 脚本的输出。
控制台显示 404。找不到文件。 php 文件是我的 php 文件夹。我的 js 文件夹中的 js 文件。和根目录下的 index.php。
在某些地方你有'recherche'，而在你的AJAX调用的URL中你有'reherche'。是不是少了一个“c”？

标签： php jquery ajax

【解决方案1】：

对于您要完成的工作，我会考虑使用 jQuery 自动完成功能而不是 keyup。更多信息可以在这里找到http://jqueryui.com/demos/autocomplete/。这是直接内置在 jQuery 中的，不需要任何插件。

希望这会有所帮助！

【讨论】：