Automatically send autocomplete option

Question

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!

score 1 · Answer 1 · answered Feb 23 '22 at 18:56

1

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

answered Feb 23 '22 at 18:56

Akzhol Kadylbek

101
5

1

onkeyup didnt work because if I type 1 character it sends already. – Capuccino Feb 23 '22 at 19:11
2

Listen to the click event on the option element. – dziku86 Feb 23 '22 at 19:35

score 1 · Accepted Answer · answered Feb 23 '22 at 22:10

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!

Automatically send autocomplete option

2 Answers2