Question

我有以下代码来搜索AJAX。现在，如果我将onblur事件应用于文本框（以便搜索结果消失）并再次返回文本框，则搜索功能不再有效。事实是，一旦onfocus事件被调用，它可能无法正确调用onblur事件。任何帮助将不胜感激。

<script type="text/javascript">
$(document).ready(function () {
    $(".searchproductbrand").keyup(function () {
        var kw = $(".searchproductbrand").val();
        if (kw != '') {
        $.ajax({
            type: "POST",
            url:  "livesearch.php",
            data: "kw=" + kw,
            success: function (option) {
                $("#livesearch").html(option);
                document.getElementById("livesearch").style.border = "1px solid #A5ACB2";
            }
        });
        } else {
            $("#livesearch").html("");
            document.getElementById("livesearch").style.border = "0px";
        }
        return false;
    });
});
</script>

<script>
$(document).ready(function () {
    $(".searchproductbrand").blur(function () {
        document.getElementById("livesearch").style.display = "none";
    })
});
</script>

Livesearch是div我打印搜索结果的地方。

Answer 1

你应该提供你的标记，或者jsfiddle，但我几乎可以确定一切正常，但在onblur事件中你将'livesearch'元素的显示规则设置为none，但是你永远不会将它设置为阻止所以你让它变得不可见并且它保持这种状态，因为你需要将它设置为阻止或你想要的任何可见的显示规则，我根据你发布的内容创建了一个jsfiddle示例，我冒昧地改变你的代码并删除了ajax部分所以你可以专注于真正的问题，我希望这能解决你的问题。

http://jsfiddle.net/kFj9u/1

jQuery(document).ready(function(){
    var $liveSearch = $('#liveSearch');
    $(".searchProductBrand").keyup(function(){
    var keyWord = $(this).val();
    if(keyWord != ''){
        var msg = 'You searched for ' + keyWord;
        $liveSearch.css('display','block').html(msg);
    }else{
       $liveSearch.html('').
       css('border','none');

    }

   }).blur(function(){
    $liveSearch.css('display','none');
  })
});

Answer 2

您的livesearch可能仍然隐藏，请尝试以下方法：

<script type="text/javascript">
$(document).ready(function () {
    $(".searchproductbrand").keyup(function () {
        var kw = $(".searchproductbrand").val();
        if (kw != '') {
        $.ajax({
            type: "POST",
            url:  "livesearch.php",
            data: "kw=" + kw,
            success: function (option) {
                $("#livesearch").show(); // this is
                $("#livesearch").html(option);
                document.getElementById("livesearch").style.border = "1px solid #A5ACB2";
            }
        });
        } else {
            $("#livesearch").html("");
            document.getElementById("livesearch").style.border = "0px";
        }
        return false;
    });
});
</script>

<script>
$(document).ready(function () {
    $(".searchproductbrand").blur(function () {
        document.getElementById("livesearch").style.display = "none";
    })
});
</script>

在调用textb onblur事件时搜索不在ajax中工作

2 个答案: