Automatically send autocomplete option-CodePudding

I want to automatically send the selected autocomplete option after selecting, not needing to click on submit button or clicking out of the box, ive tried "onchange" but I have to click out of the box after autocompleting. Here is how the events are going right now:

The empty box:

Typing something:

After selecting:

The problem is that it only sends after I click somewhere else, I wanted it to automatically send after selecting the option. Finally, heres the code:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<form id="search_box" method="POST" action="<?php echo $_SERVER['PHP_SELF'];?>">
    Busca por nome, ticker ou código CVM:
    <br>
    <input id="searchbox" type="text" name="searchbox" onchange="this.form.submit()">
</form>
<script>

$(function()
{
    var opac =  <?php echo json_encode($ressb); ?>;
    $( "#searchbox" ).autocomplete
    (
        {
            source: opac
        }
    );
}
);
</script>

Thanks in advance!

CodePudding user response：

onchange event is not a "real" onchange, for your demand you need to use onkeyup event

CodePudding user response：

Ive tried the solutions provided using onkeyup with EventListener but couldnt make it to work, but found another topic with a solution that worked for me, by working directly in the autocomplete function, unfortunately I didnt found it before opening this question.

Here is the updated code:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<form id="search_box" method="POST" action="<?php echo $_SERVER['PHP_SELF'];?>">
    Busca por nome, ticker ou código CVM:
    <br>
    <input id="searchbox" type="text" name="searchbox">
</form>
<script>
$(function()
{
    var opac =  <?php echo json_encode($ressb); ?>;
    var formac = document.getElementById("search_box");
    $( "#searchbox" ).autocomplete
    (
        {
            source: opac,
            select: function(event,ui)
            {
                $( "#searchbox" ).val(ui.item.value);
                formac.submit();
            }
        }
    );
}
);
</script>

Thanks for the answers!