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!
Live example: http://tinyurl.com/84axyym
<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>
