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代替:)，一些更改：

请改用$(this).val()。
将dataType指定为JSON。当$.get()尝试智能地猜测dataType时，有时可能会出错...尤其是在回显纯文本时。因此，请尝试使用JSON - 当您实际执行此操作时，当您从数据库返回搜索结果（在数组中）时，它会稍后付款。
在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}即可轻松完成此操作。

Answer 2

我认为它与您的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);
        });
    });
    });

Answer 3

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

自动建议搜索框与PHP和jquery

3 个答案: