我有一个代码,该函数是自动提示。这段代码很好用。我只想问你在文本框中输入文本后如何关闭框。在我的代码中,当我尝试点击任何地方时,它没有关闭该框。所以我想要做的就是当我点击任何地方以便盒子必须关闭时。
这是我的jQuery:
$(document).ready(function() {
$(".text_search").keyup(function() {
var searchbox = $(this).val();
var dataString = 'searchword=' + searchbox;
if (searchbox == '') {} else {
$.ajax({
type: "POST",
url: "search1.php",
data: dataString,
cache: false,
success: function(html) {
$("#display").html(html).show();
}
});
}
return false;
});
});
HTML:
<div class="search">
<form method="get" action="search.php" autocomplete="off">
<input class="text_search" type="text" name="q" id="q" value="Search people" onfocus="if (this.value == 'Search people') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search people';}">
</form>
</div>
<div id="display">
</div>
答案 0 :(得分:4)
只需在文档正文中添加一个事件处理程序,如果它打开则关闭该框。把它放在你身体的尽头:
<script>
$(window).ready(function(){
$('body').click(function(){
$("#display").hide();
});
});
</script>
编辑:
如果您还希望在单击搜索框时再次启动搜索,请将脚本更改为:
$(document).ready(function() {
var launchSearch = function() {
var searchbox = $(this).val();
var dataString = 'searchword=' + searchbox;
if (searchbox == '') {} else {
$.ajax({
type: "POST",
url: "search1.php",
data: dataString,
cache: false,
success: function(html) {
$("#display").html(html).show();
}
});
}
return false;
};
$(".text_search").keyup(launchSearch).click(launchSearch);
$('body').click(function(){
$("#display").hide();
});
});
答案 1 :(得分:3)
试试这个:
$('body').click(function(){
$("#display").hide();
});
答案 2 :(得分:1)
$(document).click(function(e) {
if($(e.target).parents("#display").length == 0 &&
$(e.target).attr("id") != "display") {
$("#display").hide();
}
});
您必须检查点击不在显示div
中答案 3 :(得分:0)
试试这个
$(document).ready(function(){
$('body').click(function(){
$("#display").hide();
});
$(".text_search").keyup(function()
{
var searchbox = $(this).val();
var dataString = 'searchword='+ searchbox;
if(searchbox=='')
{}
else
{
$.ajax({
type: "POST",
url: "search1.php",
data: dataString,
cache: false,
success: function(html)
{
$("#display").html(html).show();
}
});
}return false;
});
});