How to display search results onkeyup?

I have a search box that as the user types letters into the search box, we will filter and display the results. However, as the user types each letter the search results are getting toggled between showing and hiding. I am very new to JS so I hope it could be an easy fix.

Here is my HTML:

See Below

Here is my toggle JS:

See Below

How can I tweak the JS to not toggle back and forth?

//Here are my edits to help answer the question. This is the JS and HTML I am using to display the results:

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 fo开发者_如何转开发rm = $("<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> 

You'll need to do something similar to the code I have posted below. This assumes that you can access the object that contains the search results.

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';
    }
}

Basically, you need to determine if you have search results to display before you attempt to toggle the div's visibility.

//EDIT AFTER COMMENTS

OK, so it looks like the results are adding li's to the ul. So, assuming that the code is taking away the li's as well as adding them, you should be checking for the number of elements in the ul == 0. See below.

$('#friendslist > li').length

To be honest, I'm having a bit of difficulty trying to determine exaclty what the code is doing. I'm certainly not a jquery expert. I would say if the above code doesn't get you going in the right direction, I'm out of ideas.

If you're only wanting it to display when you enter the field use the onFocus="method()" attribute. followed by onBlur="method()". this will display the block when you enter the field and hide it when you leave.

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

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

teach a man to fish: http://www.w3schools.com/jsref/dom_obj_event.asp

// EDIT

I think Quickfire's answer is the best solution. but as I understand it you want you results to show/hide, so I modified his method to better suit your markup.

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
    }
}