javascript - 使用 php 和 jquery 的自动建议搜索框

Question

我对这段代码有疑问，它是关于一个使用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";
    }
}

?>

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

有什么建议吗？

Answer 1

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

1. 使用$(this).val()相反。
2. 指定dataType作为 JSON。如$.get()尝试智能地猜测数据类型，有时可能会出错......尤其是当您回显纯文本时。因此，请尝试使用 JSON 来代替 - 当您真正抽出时间从数据库返回搜索结果(以数组形式)时，它会在稍后得到返回。
3. 在 PHP 中，使用 PHP 函数 json_encode() 以 JSON 格式回显结果。 。请参阅上面的解释。

<小时/>

$(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直接事件，因为您的用户可能打字速度非常快，导致来回发送大量数据。相反，尝试使用 this plugin 来限制它，而且很容易实现:

$('.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() 轻松完成。 (参见 documentation )而不是 {search_term: search_term} .