Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery function execute on Button Click and Enter/Return (key)
    text
    copied!<p>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! </p> <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt; &lt;script&gt; $(document).ready(function(){ function(data) { $('#startSearch').click(function(){ $('#tweets .results').remove(); var searchTerm = 'http://search.twitter.com/search.json?q=' + $('#twitterSearch').val() + '&amp;callback=?' $.getJSON(searchTerm, function(data) { $.each(data.results, function() { $('&lt;div class="results"&gt;&lt;/div&gt;') .hide() .append('&lt;a class="userPicLink" href="http://twitter.com/' + this.from_user + '"&gt;' + '&lt;img class="userImg" src="' + this.profile_image_url + '"&gt;' + '&lt;/a&gt;') .append('&lt;span class="userName"&gt;' + '&lt;a href="http://twitter.com/' + this.from_user + '"&gt;' + this.from_user + '&lt;/span&gt;') .append('&lt;span class="userText"&gt;' + this.text + '&lt;/span&gt;') .append('&lt;time class="textTime"&gt;' + relTime(this.created_at) + '&lt;/time&gt;') .appendTo('#tweets') .fadeIn(); }); }); &lt;/script&gt; </code></pre> <p></p> <pre><code>&lt;body&gt; &lt;label id="searchLabel" for="twitterSearch"&gt;Search&lt;/label&gt; &lt;input type="search" list="searchSugg" id="twitterSearch" placeholder="css3 animation" required aria-required="true"&gt; &lt;input id="startSearch" type="submit"&gt; &lt;datalist id="searchSugg"&gt; &lt;option value="css3 mulitple backgrounds"&gt; &lt;option value="html5 video"&gt; &lt;option value="responsive web design"&gt; &lt;option value="twitter api"&gt; &lt;/datalist&gt; &lt;div id="tweets"&gt; &lt;/div&gt; &lt;/body&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload