0

我对这段代码有疑问，它是关于一个使用 ajax 为用户提供自动建议的搜索框，我正在测试代码但它似乎不起作用，有什么建议吗？

HTML 代码：- 

<input class="autosuggest" name="autosuggest" type="text"></input>

和 JavaScript 代码：-

    $(document).ready(function(){
    $('.autosuggest').keyup(function(){
        var search_term = $(this).attr('value');
        $.post('search.php', {search_term:search_term}, function(data){
            alert(data);
        });
    });
 });

现在是 PHP 页面：-

    <?php
require_once "database/db.php";

if(isset($_POST['search_term']) == true && empty($_POST['search_term']) == false){
    echo"something";
    }
}

?>

现在这段代码应该给我一个带有“某物”值的警报框，不是吗？它只是给了我一个空警报框，我不知道为什么！

有什么建议么？

4

3 回答 3

4

首先，如果你只是从数据库中搜索，而不是以任何方式修改数据库，你应该GET改用:)，还有一些变化：

  1. 改为使用$(this).val()。
  2. 指定dataType为 JSON。由于$.get()试图智能地猜测数据类型，它有时可能会出错......尤其是当您回显纯文本时。因此，请尝试改用 JSON - 当您从数据库返回搜索结果（以数组形式）时，当您实际开始执行此操作时，它会在稍后得到回报。
  3. 在您的 PHP 中，使用 PHP 函数以 JSON 格式回显您的结果json_encode()。见上面的解释。
$(document).ready(function(){
    $('.autosuggest').keyup(function(){
        var search_term = $(this).val();
        $.get(
            'search.php',
            {
                search_term: search_term
            },
            function(data) {
                alert(data);
            },
            'json'
        });
    });
});

如果您正在使用GET，请记住也更新您的 PHP 脚本：

<?php
    require_once("database/db.php");
    if(isset($_GET['search_term']) && !empty($_GET['search_term'])){
        echo json_encode("something");
    }
}
?>

其他优化说明：

节流keyup()。我通常避免直接收听keyup事件，因为您的用户可能会非常快速地键入，从而导致来回发送大量数据。相反，尝试使用这个插件来限制它，它很容易实现：

$('.autosuggest').keyup($.throttle(250 ,function(){  // Unobstructive throttling

    // Your code here

}));  // Remember to close the parenthesis for the $.throttle() method

使用“搜索”作为输入类型。为了更好的可用性，<input type="search" ... />请用于您的搜索字段。此外，对于无法识别类型的旧版或不兼容的浏览器，该字段将简单地恢复为<input type="text" ... />

序列化表单数据。我依靠序列化来简化流程，并使 AJAX 函数保持整洁（否则您将不得不枚举所有要提交的字段）。这可以通过使用$('form').serialize()（参见文档）而不是{search_term: search_term}.

于 2013-09-28T17:37:18.417 回答
0

我相信这与您的 search_term 变量名称与数组键的名称相同，因为字符串也可以用作键。因此，js 将键转换为包含 .autosuggest 值的字符串。尝试将变量名称更改为 the_search_term。例子：

    $(document).ready(function(){
    $('.autosuggest').keyup(function(){
        var the_search_term = $(this).attr('value');
        $.post('search.php', {search_term:the_search_term}, function(data){
            alert(data);
        });
    });
    });
于 2013-09-28T17:46:59.987 回答
0

您可以使用简单的工具进行自动建议：

于 2013-09-28T17:53:07.330 回答