How to use search button with jquery ui autocomplete?

Question

I am developing a website where i am using search bar using jquery ui autocomplete plugin.

But now that only works with keyboard Enter and mouse click after selecting from dropdown. I have also put a search button,but dropdown closes when clicked on button and no redirection or anything happens.

Jquery:

$(function() {
    $( "#searchbox" ).autocomplete({
        source: url + 'Home/searchallresults_shop',
        autoFocus:true,
        select: function( event, ui ) {
            $( "#searchallresults_shop" ).val( ui.item.name );
            console.log(ui);
            window.location.href = ui.item.url;
        }
    });
});

HTML:

<input type="text"  name="searchbox" id="searchbox">
<button type="submit" id="searchbutton_jq">Search</button>

How can i make search button select first autocomplete item and redirect?

Thanks.

Answer 1

It's not clear exactly what you're saying. I think what you mean is that when a result item has focus, you want that to populate a field so the user can then click the 'Search' button instead of pressing Enter or clicking on the result. I'm just not sure how often this will come into play.

Consider the following code:

 var myData = [{ value: "jquery", label: "jQuery", url: "https://jquery.com/" }, { value: "jquery-ui", label: "jQuery UI", url: "https://jqueryui.com/" }, { value: "sizzlejs", label: "Sizzle JS", url: "https://sizzlejs.com/" } ]; $(function() { function redirect(u) { window.location.href = u; } $("#searchbox").autocomplete({ source: myData, autoFocus: true, select: function(e, ui) { $("#searchallresults_shop").val(ui.item.label); $("#searchbutton_jq").data("url", ui.item.url); return false; }, focus: function(e, ui) { $("#searchallresults_shop").val(ui.item.label); $("#searchbutton_jq").data("url", ui.item.url); return false; } }); $("#searchbutton_jq").click(function() { if ($(this).data("url") != undefined) { redirect($(this).data("url")); } }); }); 

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <input type="text" name="searchbox" id="searchbox" /> <button type="submit" id="searchbutton_jq"> Search </button> <br /> Shop: <input type="text" id="searchallresults_shop" /> 

If one of the items has focus , we can use the callback to perform some actions. If focus is sustained and the user clicks 'Search', the expected redirects happens. The same if they select an item. Remember that blur may also trigger select . Clicking on the button would trigger a blur event, so it's not clear which is really bubbling to the top since they both do the same thing.