Submit item on select INSTEAD of button click in HTML Form WP Autocomplete dropdown List

Question

Below is a script I have loaded into an HTML Form Web Part Filter. It is autopopulated with list items from a list called 'Companies'. I want the list item to be submitted upon select INSTEAD of the users having to select the item from dropdown, and then hit the 'submit' button. New to development, so thanks for being patient if this is an obvious or easy fix. Thanks for your help!

<script>  
// Settings 
var url = "https://<mydomain>/_vti_bin/listdata.svc/Companies()";  
var field = "Title";  

// Onload  
$(document).ready(function () {  
$("#mytags").autocomplete({  
    source: function (req, add) {  
        var suggestions = search(req.term, url, field);  
        add(suggestions);  
    }  
});  
});  



// Search all the listitems by using the REST Service  
// Value is the text that needs to be used in the query  
// listurl is the listdata.svc url withouth the filter params  
// field is the name of the field where the value in exists  
function search(value, listurl, field) {  
    var coll = new Array();  
    var url =  
        listurl + "?$filter=startswith(" + field + ",'" + value + "')";  

$.ajax({  
    cache: true,  
    type: "GET",  
    async: false,  
    dataType: "json",  
    url: url,  
    success: function (data) {  
        var results = data.d.results;  
        for (att in results) {  
            var object = results[att];  
            for (attt in object) {  
                if (attt == field) {  
                    coll.push(object[attt]);  
                    }  
                }  
            }  
        }  
    });  
    return coll  
}  
</script>  

<div class="ui-widget">
  <label for="mytags"> Companies</label>
<div onkeydown="javascript:if (event.keyCode == 13) _SFSUBMIT_">
<input id="mytags" name="mytags" input type="text"/>
<onchange="javascript:_SFSUBMIT_"/></div>

Answer 1

UPDATE AND ANSWER I was able to make this happen by creating a cookie as a variable that stored the list item selected from the autocomplete dropdown list. The SFSUBMIT also needs to be referenced in the script, which I'm assuming is the equivalent of a trigger. Thanks for everyone's help.

Here's what worked:

$("#mytags").autocomplete({
            source: data,
            select: function(event, ui) {
                // alert(ui.item.label);
                $.removeCookie("MyTagCookie");
                $.cookie("MyTagCookie", ui.item.label, { path: '/' });
                $("#mytags").val($.cookie(""));
                _SFSUBMIT_;
            }
        });
    }

Answer 2

Here is the HTML and Javascript we have used to get the auto complete dropdown on typing.

<div class="multichoice-dropdown" id="ddlDepartment">
<input id="txtDepartment" class="mandatory form-control" readonly="readonly" type="text">
<ul id="list-departments" style="display: none;">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>

$("#ddlDepartment input[type=text]").on("keyenter", function() {
var url = ">/_api/web/Lists/getByTitle('>')?$filter=startswith(Title,'>')&$select=Title";
//get the values from jQuery
var results = data.d.results;
$("#ddlDepartment ul li").remove();
$.each(results, function(index, item) {
    $("#ddlDepartment ul").append("
" + item.Title + "
");
});
});
$("#ddlDepartment input[type=text]").on("click", function(){
    $("#ddlDepartment ul").show();  
});

$("#ddlDepartment").on("click", "ul li", function(){

    $("#ddlDepartment input[type=text]").val($(this).text());   
});

$("#ddlDepartment").on("mouseleave", "#ddlDepartment ul", function(){
    $(this).hide();
});

Let me know if you need additional inputs.

Answer 3

What you need is change event like below. Just write the code in the braces below and it should work for you.

$("select[id='mytags'").change(function(){//YourCode}