Jquery Autocomplete + Search results

Question

I've got the following code working but I still need some help figuring out how to make an autocomplete input section a search bar aswell.

first I thought I'd need to make a form and use the submit to get the results, but from what I understand I can simply do it with the "search" method/event of jquery and save the trouble Thought, I failed to succeed

Here is what I got:

<div id="search">
    <input id="project" />
</div>

as the html

$( "#project" ).autocomplete({
    minLength: 0,
    source: projects,
    focus: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        return false;
    },
    select: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        $( "#project-id" ).val( ui.item.value );
        $( "#project-description" ).html( ui.item.desc );
        return false;
    },
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .append( "<a>" + item.label +  "</a>" )
    .appendTo( ul );
};

as the jquery I've seen a few similar question but I failed to get the right answer from what I've done the autocomplete list is visible while typing the words but what I want to happen is when the user presses the enter key all the results that were in the autocomplete list will be shown in a certain div in another part of the page.

thanks for your help (tried inserting the 'search', ' ' field and a few other methods none of those achieved my goal :( )

Answer 1

Here Is the code:

<div id="search">
  <input list="results" id="project" onkeydown="if (event.keyCode == 13) { checkInput(this.value); return false; }" />
</div>

The avaible results...

<datalist id="results">
  <option>Demo</option>    
  <option>Example</option>
  <option>pizza</option>
</datalist>

Finally the javascript

function checkInput(searchQuery)
{
if(searchQuery=="Demo")
{
    window.location = "Demo.html";
}
else if(searchQuery == "Example")
{
    window.location = "Example.html";
}
else if(searchQuery == "Pizza")
{
    window.location = "Pizza.html";
}
else
{
    window.location = "noresult.html";
}
}

So that way when ever someone goes to search they have a limited amount of options in the pre-populated list and which ever one they select leads them to your target page! I can't take all the credit, but I hope that helps!