如何单击我的结果不会将我带到href并取消文本输入？

Question

我有一个文字输入，当我输入时，人们的个人资料出现，我可以点击，它应该带我到他们的个人资料。问题是，当我从结果中点击其中一个人物配置文件时，它不会将我带到他们的配置文件，它只是忽略它，因为我将结果列表设置为在文本输入的“模糊”上消失。请注意，如果我删除了隐藏文本输入模糊结果列表的jquery，它会工作（将我带到人的配置文件）。为什么我只是点击结果链接呢？

$(document).on('blur', '#student_search_b', function() 
{ 
    $("#student_search_results").hide();
});

<li id="student-search-bar">
    <form action="" method="post">
        <input type="text" id="student_search_b" name="student_search" class="form-control" placeholder="Search" autocomplete="off">
        <span class="glyphicon glyphicon-search form-control-feedback"></span>
    </form>
</li>

<!-- SEARCH RESULTS ARE STORED HERE -->
<div id="student_search_results"></div>

Answer 1

首先触发文本框的模糊事件，并在链接上的点击事件有可能触发之前隐藏结果窗格。

如果您绝对想要将代码保留在模糊事件处理程序中，则可以延迟其效果，以便为链接上的click事件提供机会：

$('#student_search_b').blur(function () {
    setTimeout(function () { $("#student_search_results").hide(); }, 250);
});

更好的解决方案是删除模糊事件处理程序，并在div的click事件处理程序中隐藏结果窗格，该处理程序在单击其中一个链接控件后处理：

$('#student_search_results').click(function () {
    $("#student_search_results").hide();
});