自动建议搜索框与PHP和jquery

时间:2013-09-28 17:33:28

标签: javascript php jquery ajax

我遇到了这个代码的问题,它是关于一个搜索框,它使用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”的警告框,不是吗?它只是给了我一个空警报框,我不知道为什么!

有什么建议吗?

3 个答案:

答案 0 :(得分:4)

首先,如果您只是从数据库中搜索,而不是以任何方式修改数据库,那么您应该使用GET代替:),一些更改:

  1. 请改用$(this).val()
  2. dataType指定为JSON。当$.get()尝试智能地猜测dataType时,有时可能会出错...尤其是在回显纯文本时。因此,请尝试使用JSON - 当您实际执行此操作时,当您从数据库返回搜索结果(在数组中)时,它会稍后付款。
  3. 在PHP中,使用PHP函数json_encode()以JSON格式回显结果。见上面的解释。

  4. $(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}即可轻松完成此操作。

答案 1 :(得分: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);
        });
    });
    });

答案 2 :(得分:0)

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