Alvin Jones Alvin Jones - 5 months ago 19
jQuery Question

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

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>

Answer

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"  >