live search owen

HTML

<form id="ingredients">
<div id="search">
    <input type="text" id="find"/>  
   <ul id="list">
       <li>item 1</li>
       <li>item 2</li>
       <li>item 3</li>
   </div> 
</div>
<ul id="items">
    <li id="1"></li>
    <li id="2"></li>
    <li id="3"></li>
    <li id="4"></li>
    <li id="5"></li>
</ul>
       <input name="find" type="submit" class="findbtn" value="find">

    </form>

CSS

#search {width: 300px;}
#search input{width: 300px; height: 20px; margin-left: 5px; margin-top: 5px;}
#list {position: absolute; top: 30px; left: 5px; width: 200px; height: 100px; background-color:#f4f4f4;}
#items li{list-style: none; float: left; width: 100px; height:100px; border:1px solid black;margin: 5px;}

JavaScript

var x = 1;
$('document').ready(function(){
    $('#list').hide();
});

$("#find").click(function(){
    $('#list').toggle();
    //alert('test');
});

$("#list li").click(function(){  
    var item = $(this).html();
    $('#list').toggle();
    //alert(item);
    $('#'+x).html(item);
    x++;
});
$('#ingredients').submit(function (event) {
    event.preventDefault();
    if (($('li:first-child').text()) === '') {
        alert('It seems your fridge is empty. Please fill it first!');
        return false;
    } else {
        var action = "body.html?page=results&ingredients=";
        var params = [];
        $("#items li").each(function () {
            if ($(this).text() != "") params.push($(this).text());
        });
        params = params.join(",");
        //window.location = action + params;
        alert(action+params);
    }
});