On a page I have a search (input) box and below a few checkboxes with labels.
The idea is as people type the variable projects are searched and the results in the list are replaced with the result. this would probably mean losing the whole list and re-writing it
here is the js i am using
var projects = [{ value: "open", label: "Open", },{ value: "inprogress", label: "In Progress", },{ value: "reopened", label: "Reopened", },{ value: "closed", label: "Closed", },{ value: "another", label: "Another Status", }]; $( "#search" ).autocomplete({ minLength: 0, source: projects }); });
and here is the HTML
<form action="#" id="issue-filter"> <input placeholder="Search..." id="search" autocomplete="off" ><span class="icon noloading">More</span></div> <div id="searcher-status-suggestions" class="aui-list" style="display: block;"> <div tabindex="-1" class="aui-list-scroll"> <ul class="aui-last"> <li><input type="checkbox" tabindex="-1" value="open">Open</li> <li><input type="checkbox" tabindex="-1" value="inprogress">In Progress</li> <li><input type="checkbox" tabindex="-1" value="reopened">Re-Opened</li> <li><input type="checkbox" tabindex="-1" value="inprogress">In Progress</li> </ul> </div> </div> </form>
i have setup the jquery ui, jquery etc and when i type into the input box I can see the list from the projects. I am not sure how to update the ul list as I type. Also the ul list might not have all the projects as it might show only the first 10
I have had a look at the jQuery documentation but am unsure of the best way to pull this off
Can anyone help?
an example fiddle is here http://jsfiddle.net/dwhitmarsh/CmYeq/