jQuery function execute on Button Click and Enter/Return (key)

Question

I'm trying to create a little search box that allows you to search Twitter based on the keyword you enter in the input field. While it's work, it only works if you press the Submit button. I would also like to be able to press the Enter or Return key to initiate the search. I've tried using the .sumbit function and wrapping my input around a form element with no success. Any insight would be greatly appreciate!

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>
$(document).ready(function(){

function(data) {

$('#startSearch').click(function(){ 

$('#tweets .results').remove();

    var searchTerm = 'http://search.twitter.com/search.json?q=' + $('#twitterSearch').val() + '&callback=?'

    $.getJSON(searchTerm,  function(data) {
        $.each(data.results, function() {
            $('<div class="results"></div>')
            .hide()
            .append('<a class="userPicLink" href="http://twitter.com/' + this.from_user + '">'  + '<img class="userImg" src="' + this.profile_image_url + '">' + '</a>')
            .append('<span class="userName">' + '<a href="http://twitter.com/' + this.from_user + '">' + this.from_user + '</span>')
            .append('<span class="userText">' + this.text + '</span>')
            .append('<time class="textTime">' + relTime(this.created_at) + '</time>')
            .appendTo('#tweets')
            .fadeIn();

        });

  });

</script>

<body>


<label id="searchLabel" for="twitterSearch">Search</label>
<input type="search" list="searchSugg" id="twitterSearch" placeholder="css3 animation" required aria-required="true">
<input id="startSearch" type="submit">

<datalist id="searchSugg">
<option value="css3 mulitple backgrounds">
<option value="html5 video">
<option value="responsive web design">
<option value="twitter api">
</datalist>

<div id="tweets">
</div>
</body>

If you actually use a `
` element, you'll capture the `return`/`enter` key automatically and be able to use the `$.submit()` handler, but I assume you're using AJAX? — Jared Farrish, Jun 01 '12 at 22:42
i tried this method but I was unsuccessful. first I wrapped the HTML elements in a `
` and in my jQuery I used `$('#myFormsID').submit(function(){`. the result didn't seem to do anything. did i go about it the wrong way? — Alvin Jones, Jun 02 '12 at 19:35

Cyril Tourist · Accepted Answer · 2012-06-01T22:57:14.313

EDIT: As Spudley suggested "one of the main points of using jQuery is to stop you having to use event triggers embedded in the HTML markup" so a better solution would be

<script>
$(document).ready(function(){

function(data) {

$('#twitterSearch').keydown(function(event){    
    if(event.keyCode==13){
       $('#startSearch').trigger('click');
    }
});

$('#startSearch').click(function(){ 

$('#tweets .results').remove();

    var searchTerm = 'http://search.twitter.com/search.json?q=' + $('#twitterSearch').val() + '&callback=?'

    $.getJSON(searchTerm,  function(data) {
        $.each(data.results, function() {
            $('<div class="results"></div>')
            .hide()
            .append('<a class="userPicLink" href="http://twitter.com/' + this.from_user + '">'  + '<img class="userImg" src="' + this.profile_image_url + '">' + '</a>')
            .append('<span class="userName">' + '<a href="http://twitter.com/' + this.from_user + '">' + this.from_user + '</span>')
            .append('<span class="userText">' + this.text + '</span>')
            .append('<time class="textTime">' + relTime(this.created_at) + '</time>')
            .appendTo('#tweets')
            .fadeIn();

        });

  });

</script>

OR - Previous proposal:

<input type="search" onkeydown="if(event.keyCode==13)$('#startSearch').trigger('click');" list="searchSugg" id="twitterSearch" placeholder="css3 animation" required aria-required="true"  >

you could do... but one of the main points of using jQuery is to stop you having to use event triggers embedded in the HTML markup. Maybe use jQuery's [`keydown()` event](http://api.jquery.com/keydown/) instead? — Spudley, Jun 01 '12 at 22:52
while I really like the idea behind Cyril's solution, when I tried to implement the added function it broke functionality completely. Neither approach seemed to work. Any I missing something here? — Alvin Jones, Jun 02 '12 at 19:45
I take it back... the solution works! Thank you very much for the help. — Alvin Jones, Jun 02 '12 at 20:50

score 4 · Answer 2 · edited May 23 '17 at 11:51

4

If you want place event with not obtrusive js then you can use also this system:

$("#element").keydown(function(event) {
if (event.keyCode == 13) {
    // do stuff
}

also if you have a submit button, this is an alternative, #element must be the text field where you want catch the event.

reference to this: answer

edited May 23 '17 at 11:51

Community

1
1

answered Jun 01 '12 at 22:54

Andrea V. Abbondanza

364
3
14

score 0 · Answer 3 · answered Jul 02 '16 at 00:51

Try create listeners for both key press and mouse clicks.

function myFunction(e){
    if (e.which=='13' || e.type=='click'){
        // Run your code here
    }
}
$(document)
  .on('click', '#startSearch', myFunction)
  .on('keypress', this, myFunction);

In action http://codepen.io/scottyzen/pen/akWPJd

jQuery function execute on Button Click and Enter/Return (key)

3 Answers3

Linked