jQuery - Button to focus a search box and simulate enter key

Question

The idea here is when people click on "TEST" then it automatically populate the text input and do the search. So I want to simulate Enter Key pressing when clicking on the text "TEST". Is there any ways to do with jQuery?

<div class="item" onclick="myFunc1()"><p onclick="myFunc2()">TEST</p></div>
    <script>
            function myFunc1() {
            document.getElementById("Search").value = "html templates";
            }
            function myFunc2() {
            document.getElementById("Search").focus();
            }
    </script>
    <input type="text" name="search" id="Search">
</div>

Maybe this would help https://stackoverflow.com/questions/961532/firing-a-keyboard-event-in-javascript — klugjo, Dec 26 '17 at 05:02

score 0 · Answer 1 · answered Dec 26 '17 at 05:22

Here is a small demo based on your question and code:

$("#testClickHere").on('click', function() {
  $("#Search").val($(this).text()).focus().trigger('keypress');
});

$("#Search").on('input keypress', function() {
  console.log($(this).val() + " is search string. Search code here...");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
  <p id='testClickHere'>TEST</p>
</div>

<input type="text" name="search" id="Search">

score 0 · Answer 2 · answered Dec 26 '17 at 05:56

The code you posted is hard to read due to poor spacing. Also, why do you have the script tag inside of the div?

IMO, it would be better to use a button element than a paragraph element for the clicking of TEST. Also, the myFunc1() is assigned to a div that does not have any visible styling which makes it difficult to click.

Did you add myFunc2() in order to assign text to the input? Could you explain more on its purpose?

The code below does not do exactly what you requested but i think you can accomplish what you want based what's in it. Hope it helps.

var input = document.getElementById("my_input");

var button = document.getElementById("my_button");

input.onclick = fillInput;

button.onclick = doSearch;

function fillInput(){
 input.value = "html templates";
}

function doSearch(){
 //search code here
  console.log("Searching...");
}

<input id="my_input" type="text" placeholder="click here">

<button id="my_button">TEST</button>

jQuery - Button to focus a search box and simulate enter key

2 Answers2