如何在keyup上显示搜索结果？

Question

我有一个搜索框，当用户在搜索框中输入字母时，我们将过滤并显示结果。然而，当用户键入每个字母时，搜索结果会在显示和隐藏之间切换。我对 JS 很陌生，所以我希望它可以是一个简单的修复。

这是我的 HTML：

See Below

这是我的切换 JS：

See Below

如何调整 JS 不来回切换？

//这是我的编辑，以帮助回答这个问题。这是我用来显示结果的 JS 和 HTML：

HTML:

<div class="friendssearch" onclick="toggle_visibility('friendslist');">
  <div class="friendssearch">
    <div id="friendssearchbox"></div>
  </div>
        <ul id="friendslist" style="display: none;">
            <li>
              <a href="#">  
                <div class="friendsflybox" title="Friends Name">
                    <p class="friendsflyboxname">Ryan Bennett</p>
                </div>
              </a>
            </li>
        </ul>
    </div>

Javascript:

<script> 
(function ($) {
 // custom css expression for a case-insensitive contains()
 jQuery.expr[':'].Contains = function(a,i,m){
   return (a.textContent || a.innerText || 
"").toUpperCase().indexOf(m[3].toUpperCase())>=0;
 };

 function listFilter(header, list) { // header is any element, list is an unordered list
 // create and add the filter form to the header
 var form = $("<form>").attr({"class":"filterform","action":"#"}),
    input = $("<input>").attr({"class":"filterinput clearFieldBlurred  
ClearField","type":"text", "value":"Start typing a Name"});
$(form).append(input).appendTo(header);

$(document).ready(function() {
$('.clearField').clearField();
}); 

$(input)
  .change( function () {
    var filter = $(this).val();
    if(filter) {
      // this finds all links in a list that contain the input,
      // and hide the ones not containing the input while showing the ones that do
      $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();
      $(list).find("a:Contains(" + filter + ")").parent().slideDown();
    } else {
      $(list).find("li").slideDown();
    }
    return false;
  })
.keyup( function () {
    // fire the above change event after every letter
    $(this).change();
});
} 
//ondomready
$(function () {
  listFilter($("#friendssearchbox"), $("#friendslist"));
});
}(jQuery));
</script> 

Answer 1

您需要执行类似于我在下面发布的代码的操作。这假设您可以访问包含搜索结果的对象。

function toggle_visibility(id)
{
    //Check if there are any search results to display
    var searchResultLength = document.getElementById(searchResultID).innerHTML.length;

    if (searchResultLength > 0) // display div
    {
        var e = document.getElementById(id);
        e.style.display = 'block';
    }
    else //No search results, hide div
    {
        e.style.display = 'none';
    }
}

基本上，您需要在尝试切换 div 的可见性之前确定是否有要显示的搜索结果。。

//在评论后编辑

好的，所以看起来结果是将 li 添加到 ul 中。因此，假设代码删除并添加了 li，您应该检查 ul == 0 中的元素数量。请参见下文。

$('#friendslist > li').length

老实说，我在尝试确定代码的确切内容时遇到了一些困难
正在做。我当然不是 jquery 专家。我想说，如果上面的代码不能让你朝着正确的方向前进，我就没有主意了。

Answer 2

如果您只想在输入字段时显示它，请使用 onFocus="method()" 属性。接下来是 onBlur="method()"。这将在您进入该字段时显示该块，并在您离开该字段时隐藏它。

<input id="searchbox" type="text" onFocus="toggle_visibility('friendslist');" onBlur="toggle_visibility('friendslist')">

<ul id="friendslist" style="display: none;">
  <!--search results HTML-->
</ul>

授人以鱼：http://www.w3schools.com/jsref/dom_obj_event.asp

// 编辑

我认为 Quickfire 的答案是最好的解决方案。但据我了解，您希望显示/隐藏结果，因此我修改了他的方法以更好地适合您的标记。

function toggle_visibility(id){

    //Get the total number of <li> within my search result
    var results=document.getElementById(searchResultID).childNodes.length;

    if (results > 0){ // we have more than 0 results
        var e = document.getElementById(id);
        e.style.display = 'block'; // show the element
    }else{ //No search results, hide div

        e.style.display = 'none'; //hide the element
    }
}