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的可见性。

//评论后编辑

好的，所以看起来结果是将ul添加到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
    }
}

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

2 个答案: