通过按Enter启动操作

Question

http://protected-river-1861.herokuapp.com/ Link to my site

So, I need to let the search of Google Images initiate on the press of the 'enter' key. Currently, it only works on the click of the button.

HTML:

<p>Enter the keyword to search for images</p>
<input id="search-term" type="text">
<button id="go-search">Go!</button>
<div id="search-results"></div>
<div style="width: 150px; margin:0 auto;">

application.js:

$(document).on('click', '#go-search', function() {
  findImagesOnGoogle({
    keywords: $('#search-term').val(),
    container: '#search-results'
  })
});
$(document).on('click', '#search-results img', function() {
  var url = $(this).data('url');
  $("#workspace img").remove();
  var img = $("<img>").attr('src', url);
  $("#workspace").append(img);
});

The CSS, JS and HTML are all on separate tabs in Sublime Text.

Answer 1

You can try the following:

$(document).keyup('#search-term', function(event){
    if(event.keyCode == 13){
        $("#go-search").click();
    }
});

It binds a button up listener on your document and triggers a click if enter is pressed from within the input box.

Though I would rather you create a form around the elements and do the needful on it's submit event. This way, enter press would automatically be captured as a form submit. (Along with the click on a button of type submit.)

Answer 2

You could try:

$('#search-term').bind('keyup', function(e) {
  var code = e.keyCode || e.which;
  if(code == 13) {
    $('#go-search').click();
  }
});

$('#go-search').click(function() {
  findImagesOnGoogle({
    keywords: $('#search-term').val(),
    container: '#search-results'
  }) 
});

http://jsfiddle.net/gummiah/Ga2dG/