我遇到了这个代码的问题,它是关于一个搜索框,它使用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”的警告框,不是吗?它只是给了我一个空警报框,我不知道为什么!
有什么建议吗?
答案 0 :(得分:4)
首先,如果您只是从数据库中搜索,而不是以任何方式修改数据库,那么您应该使用GET
代替:),一些更改:
$(this).val()
。dataType
指定为JSON。当$.get()
尝试智能地猜测dataType时,有时可能会出错...尤其是在回显纯文本时。因此,请尝试使用JSON - 当您实际执行此操作时,当您从数据库返回搜索结果(在数组中)时,它会稍后付款。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}
即可轻松完成此操作。
答案 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)