如何使用 Jquery 自动按下回车键

Question

How can I press enter key without hitting the enter key using Jquery. I have a dropdown list. after selecting the any value from dropdown, the value of list will copy in input box(search box). After then I want to call Enter key event automatically using jquery. Please refer following code.

$(document).ready(function(){
                    var data = [
                            {
                                "name":       "Tiger Nixon",
                                "position":   "System Architect",
                                "salary":     "$3,120",
                                "start_date": "2011/04/25",
                                "office":     "Edinburgh",
                                "extn":       "5421"
                            },
                            {
                                "name":       "Black Winters",
                                "position":   "Project Engineer",
                                "salary":     "$1,300",
                                "start_date": "2018/27/05",
                                "office":     "Edinburgh",
                                "extn":       "8412"
                            },
                            {
                                "name":       "Black Winters",
                                "position":   "Project Engineer",
                                "salary":     "$1,300",
                                "start_date": "2018/27/05",
                                "office":     "Edinburgh",
                                "extn":       "8412"
                            },
                            {
                                "name":       "Orange John",
                                "position":   "Network Admin",
                                "salary":     "$3,000",
                                "start_date": "2010/10/12",
                                "office":     "Edinburgh",
                                "extn":       "8425"
                            },
                            {
                                "name":       "Tiger Nixon",
                                "position":   "System Architect",
                                "salary":     "$3,120",
                                "start_date": "2011/04/25",
                                "office":     "Edinburgh",
                                "extn":       "5421"
                            }
                                ];
                    $("#table1").DataTable({
                        data: data,
                                columns: [
                                    { data: 'name' },
                                    { data: 'position' },
                                    { data: 'salary' },
                                    { data: 'start_date' },
                                    { data: 'office' },
                                    { data: 'extn' }
                                ]
                    });

                    /* color of data table */
                    var seen = {};
                    $('#table1 tr').each(function() {
                    var txt = $(this).text();
                    if (seen[txt])
                        $(this).css("background-color", "red");
                    else
                        seen[txt] = true;
                    });
                    var positionSet = new Set();
                    positionSet.add("System Architect");
                    positionSet.add("Project Engineer");
                    positionSet.add("Network Admin");

                    for(let myPositionSet of positionSet){
                        console.log(myPositionSet);
                        $('#empPosition').append($('<option>', { 
                            value: myPositionSet,
                            text : myPositionSet 
                        }));
                    }
                    $("#empPosition").change(function() {
                        $("#table1_filter input").val(this.value);
                        e = jQuery.Event("change")
                        e.which = 13 //choose the one you want
                            $("#table1_filter input").change(function(){
                             alert('keypress triggered')
                            }).trigger(e)
                    })

                });

Here is the HTML of this above code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
 <select id="empPosition">
                </select>
            <table id="table1" class="display">
                    <thead>
                        <tr>
                            <th>name</th>
                            <th>position</th>
                            <th>salary</th>
                            <th>start_date</th>
                            <th>office</th>
                            <th>extn</th>
                        </tr>
                    </thead>
                </table>

The code is not working as i want. After copying the value in search box It should hit the enter and then it will show the result that i have copy in search box.

Answer 1

Try keyup event instead of change event

$("#table1_filter input").val(this.value).trigger('keyup')

Answer 2

Try keypress or keydown event:

var keyEvent = $.Event("keydown");
keyEvent.which = 13; 
$("#table1_filter input").trigger(keyEvent);

Link to know keyEvent value: https://keycode.info/

Answer 3

I think you should consider search API in Datatable instead of enter event

var dataTable = $("#table1").DataTable({
        data: data,
        columns: [
          { data: 'name' },
          { data: 'position' },
          { data: 'salary' },
          { data: 'start_date' },
          { data: 'office' },
          { data: 'extn' }
        ]
      });

$("#empPosition").change(function (event) {
        $("#table1_filter input").val(this.value);
        dataTable.search( this.value ).draw();
})

https://datatables.net/reference/api/search()