如果焦点不在输入上，隐藏搜索结果

如果焦点不在搜索输入上，我试图隐藏搜索结果。在.keyup()函数之后，我可以通过使用.blur()来轻松完成此操作。我的问题是，当用户点击搜索结果...它仍然隐藏。所以，我想这样当用户从文本删除焦点和用户不注重搜索结果，那么只隐藏div如果焦点不在输入上，隐藏搜索结果

HTML，使其：

<form role="search" autocomplete="off"> 
    <div> 
    <input id="searchInput" type="text" placeholder="Search"> 
    </div> 
    <div class="search_main"> 
    <div id="sresult" tabindex="0"></div> 
    </div> 
</form>

的jQuery：

$("#searchInput").keyup(function(e) { 
    var q = $(this).val(); 
    if (q !== undefined && q.length > 0) { 
    $("#sresult").show(150); 
    $("#sresult").html("No results"); 
    } else { 
    $("#sresult").hide(150); 
    } 
}).blur(function(e) { 
    $("#sresult").hide(150); 
});

JSFiddle Demo

来源

2016-11-14 user4756836

由于没有这样的条件ñ您已保留可见的搜索结果。 –

如果您希望保持可见状态，并且需要隐藏时定义其他内容，则必须删除模糊链接功能。 –

使用只需简单的添加多个事件个事件处理程序

element.on('event1 event2 etc...')

你的事件会是这样

$("#searchInput").on('keyup click',function(e) { 
    var q = $(this).val(); 
    if (q !== undefined && q.length > 0) { 
     $("#sresult").show(150); 
     $("#sresult").html("No results"); 
    } else { 
     $("#sresult").hide(150); 
    } 
}).blur(function(e) { 
    $("#sresult").hide(150); 
});

这样的时候元素被点击或KEYUP的功能将被执行，显示你的结果

DEMO

希望对你有所帮助

来源

2016-11-14 06:11:45 Beginner

当我点击“没有结果”时它仍然关闭 – user4756836

这是因为你的模糊事件 – Beginner

我知道......这就是为什么我的问题是只有当用户没有点击“没有结果”时才隐藏“没有结果”或专注于文本框 – user4756836

如果焦点不在输入上，隐藏搜索结果

回答

相关问题