Add search box to html template using ajax/javascript

I have a template for a site that I would like a javascript search box added to. The site tracks what food a person has eaten each day and the search box is for finding foods to add to the list. (See the attached screenshots for a better description) I would like for you to add the link that says "Add New Item" which will turn into a textbox once it's clicked and allow for searching. The search should suggest autocompletion results based on what has been typed and clicking one of them should add it to the list. I also need you to have this call a php function (or other mechanism) that I can use later to add this change to our database. You don't have to do the database part, just give me a function and I'll hook it up. There are a couple of different javascript autocomplete libraries, for example: [login to view URL] but you can use whichever one you like. Please include some examples of previous work. Upon accepting your bid, I'll send you the current html template and css. I'd like to find someone that would be interested in doing other work on this site too, so please mention if you're open to an ongoing arrangement.