CODEWITHSUNDEEP
htmlsearchonkeydown
UXRO
UXRO

Reputation: 23

How to trigger click event when pressing enter key? Text area

I have search area which works fine as I need it to but the problem is when i hit enter it won't search for results, so you need to press button to do so. I tried different codes but nothing is working and I'm wondering if anyone has solution for it. This is code that I have:

<input 
 data-path=".title" 
 data-button="#title-search-button"
 type="text"
 value=""
 placeholder="Search..."
 data-control-type="textbox"
 data-control-name="title-filter"
 data-control-action="filter"
/>

I guess this could work with "onkeydown=" but not really sure what to add after it.

I would really appreciate if someone has solution for this.

Upvotes: 0

Views: 6741

Answers (4)

Aruna
Aruna

Reputation: 12022

I have given a sample code below using plan javascript. This solution will work without jquery or other libraries.

On the key press event, you can either call the same method of the click event (or) trigger the button click directly as per the option 1 and option 2 mentioned below.

function triggerSearch() {
  if(event.keyCode === 13) {
    // Option 1: You can call the 'search' method directly
    //search();
    // Option 2: OR you can trigger the button `click` event
    getElement('searchButton').click();
  } 
}

function search() {
  var searchTerm = getElement('searchTextBox').value;
  getElement('searchTerm').innerHTML = searchTerm;
}

function getElement(id) {
  return document.getElementById(id);
}
<input 
            data-path=".title" 
            data-button="#title-search-button"
            type="text"
            value=""
            placeholder="Search..."
            data-control-type="textbox"
            data-control-name="title-filter"
            data-control-action="filter"
            id="searchTextBox"
            onkeydown="triggerSearch()"
        />

<input type="button" value="Search" id="searchButton" onclick="search()" />
<br/><br/>
Search Term: <span id="searchTerm"></span>

Upvotes: 0

Michael Goodwin
Michael Goodwin

Reputation: 720

Although you can use the onkeydown attribute I prefer to do these things through JavaScript event listeners & handlers. If you want to do this with the onkeydown attribute then look at Bryan's answer.

I would first add an ID/Class name to the input so we can easily target it. In my example i will add searchTextas the ID for this input.

JavaScript:

document.getElementById('searchText').addEventListener("keydown",function(e){
  if(e.keyCode == 13){
   //doSomething()
  } 
});

jQuery:

$('#searchText').on('keydown',function(e){
  if(e.which == '13'){
    //doSomething();
  } 
});

Upvotes: 3

Rohin Gopalakrishnan
Rohin Gopalakrishnan

Reputation: 664

You will have to add an event listener for keyup for your input field. e.keyCode will give you the special keys (which happens to be 13 for Enter)

Here is an example: 

$("#myinput").on('keyup', function (e) {
    if (e.keyCode == 13) {
        alert("Enter clicked");
        // add your code here
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input 
            id = "myinput"
            data-path=".title" 
            data-button="#title-search-button"
            type="text"
            value=""
            placeholder="Search..."
            data-control-type="textbox"
            data-control-name="title-filter"
            data-control-action="filter"
        />

Hope this helps!

Upvotes: 0

Bryan
Bryan

Reputation: 775

Yes, this would work with keydown. But you will need to add javascript for it to work.

<input 
    data-path=".title" 
    data-button="#title-search-button"
    type="text"
    value=""
    placeholder="Search..."
    data-control-type="textbox"
    data-control-name="title-filter"
    data-control-action="filter"
    onkeydown="if (event.keyCode == 13) { // Your search results code here;
    return false; }"
/>

Upvotes: 2

Related Questions