riaf · September 7, 2010 10:31
diff --git a/twitter_search.html b/twitter_search.html
 <!DOCTYPE html> 
 <html lang="ja"> 
 <head> 
  <meta charset="utf-8" /> 
  <title>twitter search</title> 
  <style type="text/css"> 
    body {
      color: #333;
    }
    img {
      border: 0;
    }
    #wrapper {
      width: 900px;
      margin: 0 auto;
    }
    #result {
      border: 1px solid #aaa;
      border-radius: 5px;
    }
    #result .tweet {
      clear: both;
      margin: 10px;
      border-top: 1px dotted #ccc;
    }
    .tweet .name {
      font-weight: bold;
      float: left;
      width: 150px;
    }
    .tweet .text {
      margin-left: 160px;
    }
    .tweet .date {
      margin-left: 160px;
      font-size: 80%;
    }
    .tweet .date a:link, .tweet .date a:visited {
      color: #aaa;
      text-decoration: none;
    }
    .tweet .date a:hover {
      text-decoration: underline;
    }
    .info {
      margin: 10px;
    }
    .error {
      color: red;
      font-weight: bold;
    }
  </style> 
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
  <script type="text/javascript"> 
  var search_query = '#titleonly';
  var search = function () {
    $('#result').text('Loading');
    var interval = setInterval(function() {
      $('#result').append('.');
    }, 1500);
    $.ajax({
      data: {
        q: search_query,
        rpp: 100,
      },
      dataType: 'jsonp',
      complete: function () {
        clearInterval(interval);
      },
      error: function (XMLHttpRequest, textStatus, errorThrown) {
        $('#result').prepend($('<p class="error">Error: '+textStatus+'</p>'));
      },
      success: function (data, dataType) {
        $('#result').html('');
        $('#result').append('<p class="info">Search results for <b>'+search_query+'</b>: '+data.results.length+'</p>');
        $.each(data.results, function (i, status) {
          $('#result').append($(
            '<div class="tweet">'
            + '<p class="name">'
              + '<a href="http://twitter.com/' + status.from_user + '">'
                + '<img src="' + status.profile_image_url + '" width="48" /></a><br />'
              + '<a href="http://twitter.com/' + status.from_user + '">'
                + status.from_user + '</a>'
            + '</p>'
            + '<p class="text">' + status.text + '</p>'
            + '<p class="date"><a href="http://twitter.com/'
              + status.from_user + '/status/' + status.id + '">'
              + status.created_at
            + '</a></p>'
            + '</div>'
          ));
        });
      },
      url: 'http://search.twitter.com/search.json',
    });    
  }
 
  $(function(){
    $('#q').val(search_query).change(function() {
      search_query = $(this).val();
      search();
    });
    search();
  });
  </script> 
 </head> 
 <body> 
 <div id="wrapper"> 
  <h1>twitter search</h1> 
  <p><input id="q" type="text" size="40" value="" /></p> 
  <div id="result"></div> 
 </div> 
 </body> 
 </html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8" />
	<title>twitter search</title>
	<style type="text/css">
	body {
	color: #333;
	}
	img {
	border: 0;
	}
	#wrapper {
	width: 900px;
	margin: 0 auto;
	}
	#result {
	border: 1px solid #aaa;
	border-radius: 5px;
	}
	#result .tweet {
	clear: both;
	margin: 10px;
	border-top: 1px dotted #ccc;
	}
	.tweet .name {
	font-weight: bold;
	float: left;
	width: 150px;
	}
	.tweet .text {
	margin-left: 160px;
	}
	.tweet .date {
	margin-left: 160px;
	font-size: 80%;
	}
	.tweet .date a:link, .tweet .date a:visited {
	color: #aaa;
	text-decoration: none;
	}
	.tweet .date a:hover {
	text-decoration: underline;
	}
	.info {
	margin: 10px;
	}
	.error {
	color: red;
	font-weight: bold;
	}
	</style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script type="text/javascript">
	var search_query = '#titleonly';
	var search = function () {
	$('#result').text('Loading');
	var interval = setInterval(function() {
	$('#result').append('.');
	}, 1500);
	$.ajax({
	data: {
	q: search_query,
	rpp: 100,
	},
	dataType: 'jsonp',
	complete: function () {
	clearInterval(interval);
	},
	error: function (XMLHttpRequest, textStatus, errorThrown) {
	$('#result').prepend($('<p class="error">Error: '+textStatus+'</p>'));
	},
	success: function (data, dataType) {
	$('#result').html('');
	$('#result').append('<p class="info">Search results for <b>'+search_query+'</b>: '+data.results.length+'</p>');
	$.each(data.results, function (i, status) {
	$('#result').append($(
	'<div class="tweet">'
	+ '<p class="name">'
	+ '<a href="http://twitter.com/' + status.from_user + '">'
	+ '<img src="' + status.profile_image_url + '" width="48" /></a><br />'
	+ '<a href="http://twitter.com/' + status.from_user + '">'
	+ status.from_user + '</a>'
	+ '</p>'
	+ '<p class="text">' + status.text + '</p>'
	+ '<p class="date"><a href="http://twitter.com/'
	+ status.from_user + '/status/' + status.id + '">'
	+ status.created_at
	+ '</a></p>'
	+ '</div>'
	));
	});
	},
	url: 'http://search.twitter.com/search.json',
	});
	}

	$(function(){
	$('#q').val(search_query).change(function() {
	search_query = $(this).val();
	search();
	});
	search();
	});
	</script>
	</head>
	<body>
	<div id="wrapper">
	<h1>twitter search</h1>
	<p><input id="q" type="text" size="40" value="" /></p>
	<div id="result"></div>
	</div>
	</body>
	</html>