CODEWITHSUNDEEP
javascriptjqueryhtmljquery-ui
Kirk Brannigan
Kirk Brannigan

Reputation: 29

Jquery UI autocomplete doesn't submit after Enter is pressed

I am working on a simple search box, where the user can type a value or select it from the dropdown menu. Now it works fine when you select form the menu, but if you press Enter, it doesn't do anything. Any help is appreciated. THanks

var source = [ { value: "src/devices/consoles/ps4.php",
                 label:"PlayStation 4"
               },
               { value: "src/devices/consoles/ps4.php",
                 label:"PS4"
               },
               { value: "src/devices/consoles/ps4.php",
                 label:"Sony"
               },
                { value: "src/devices/consoles/xbox.php",
                 label:"Xbox One"
               },
               { value: "src/devices/consoles/xbox.php",
                 label:"Microsoft"
               },
                { value: "src/devices/consoles/wiu.php",
                 label:"Nintendo"
              },
              { value: "src/devices/consoles/wiu.php",
                 label:"Wii U"
               }

             ];

    $("input#tags").autocomplete({
        source: source,
        select: function( event, ui ) { 
            window.location.href = ui.item.value;
        }
    });

Upvotes: 0

Views: 303

Answers (2)

martynas
martynas

Reputation: 12300

Try this:

$("#inputbox").on("keypress", function(e) {
    if (e.which == 13) {
        $("#submitbutton").click();
        // or $("form").submit();
    }
});

Resources:

Upvotes: 1

urbz
urbz

Reputation: 2667

In your event handler, try adding val() property and saying that you should allow the submit on keyCode 13 which represents Enter:

    // ...
    select: function (event, ui) {
        window.location.href = ui.item.value;
        $(this).val(ui.item.value).val();
        if (event.keyCode == 13) {
            $("#id_of_button").submit();
        }
    }
    // ...

Or an alternative way in your event handler, defining the keydown press to enter and trigger the click:

    // ...
    select: function (event, ui) {
        window.location.href = ui.item.value;
        var e = jQuery.Event("keydown");
         e.which = 13;
         $("id_of_button").trigger(e);
    }
    // ...

Upvotes: 1

Related Questions