jquery autocomplete from a list

I have a HTML list on a page, nothing special. Normal as expected format.

<ul>
<li><a>item here</a></li>
</ul>

However I want an autocomplete box at the top, that allows a user to type, and then to hide the items that dont match.

I have previously seen one with tables. Which works, but just need to amend for the list items instead. I'll be honest. JQuery isnt my fortee, hence why I'm here.

Here is the code for the data in a table, not a list.

Thanks in advance.

Marc.

<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
//Declare the custom selector 'containsIgnoreCase'.
$.expr[':'].containsIgnoreCase = function(n,i,m){
return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};

$("#searchInputTrain").keyup(function(){

$("#fbody").find("tr").hide();
var data = this.value.split(" ");
var jo = $("#fbody").find("tr");
$.each(data, function(i, v){

//Use the new containsIgnoreCase function instead
jo = jo.filter("*:containsIgnoreCase('"+v+"')");
});

jo.show();

}).focus(function(){
this.value="";
$(this).css({"color":"black"});
$(this).unbind('focus');
}).css({"color":"#C0C0C0"});
});


window.onload = function hideColumn(cno) {
var t = 'none';
var table = document.getElementById('tableID');
var rows = table.getElementsByTagName('tr');
for (var row=0; row<rows.length;row++) {
var col = rows[row].getElementsByTagName('td')
col[1].style.display=t;
}
}
// ]]></script>