清单 9. JSON 即时搜索 UI
<html><head>
<script src="jquery-1.4.2.min.js"></script>
<link rel="stylesheet" href="styles.css" type="text/css" />
<title>Instant Search - JSON Based</title>
</head>
<body>
Simpsons Search: <input type="text" id="term" />
<table id="results">
</table>
<script>
$(document).ready( function() {
$('#term').keyup( function() {
$.get('search_json.php?q='+escape($('#term').val()), function(data) {
html = '<table id="results">';
$.each( data, function( ind, ep ) {
html += '<tr><td class="episode"><b>'+ep.title+'</b> ';s
html += 'Season '+ep.season+' ';
html += 'Episode '+ep.episode+' ';
html += 'Aired '+ep.aired+'</td></tr>';
html += '<tr><td class="summary">'+ep.summary+'</td></tr>';
} );
html += '</html>';
$('#results').replaceWith( html );
} );
} );
} );
</script>
</body>
</html>
<script src="jquery-1.4.2.min.js"></script>
<link rel="stylesheet" href="styles.css" type="text/css" />
<title>Instant Search - JSON Based</title>
</head>
<body>
Simpsons Search: <input type="text" id="term" />
<table id="results">
</table>
<script>
$(document).ready( function() {
$('#term').keyup( function() {
$.get('search_json.php?q='+escape($('#term').val()), function(data) {
html = '<table id="results">';
$.each( data, function( ind, ep ) {
html += '<tr><td class="episode"><b>'+ep.title+'</b> ';s
html += 'Season '+ep.season+' ';
html += 'Episode '+ep.episode+' ';
html += 'Aired '+ep.aired+'</td></tr>';
html += '<tr><td class="summary">'+ep.summary+'</td></tr>';
} );
html += '</html>';
$('#results').replaceWith( html );
} );
} );
} );
</script>
</body>
</html>
此代码非常类似于 XML 代码，不同的是您可以对返回的数组使用 jQuery each 函数，然后使用点符号来访问数据中的所有重要关键字(也就是说，标题、剧集、摘要等等)。
现在您具有：可以用作您自己的工作起始点的即时搜索功能的初步实现。
一点补充
与 Google 的开发人员所做的相比，此实现具有三个主要区别。首先是缩放。他们每天要处理数十亿的搜索，现在通过每一次击键他们可处理数十亿单独的小搜索。虽然存在许多有关这方面的问题和解决方案，但是在这种情况下您至少有一件事情要去做 — 浏览器缓存。如果用户键入相同的关键词两次，由于浏览器缓存的缘故，实际上仅进行一个请求，因为第二次发出请求时浏览器返回缓存的数据。
Google 所作的另外一件事情是预取结果。例如，如果您键入 “mov”，则暗示您正在寻找 “movies”，进行此搜索并通过用于您缺少的 “ies” 的灰色文本指示这点。
第三个区别是对于分页的支持，这相当容易解决。您所要做的就是在页面的底部为页面链接添加一些 JavaScript，然后在用户单击以从第一页浏览到任何随后页面时调用此脚本。
结束语
Google 的即时 UI 功能真的很即时。它是革命性的吗?不是。但是它是对可用性具有深远影响的一小步。正如您从本文中看到的，通过使用像 XML、PHP 和 jQuery 这样的标准工具，这些行为的初步阶段并不难实现。
我希望您能够在您的项目中使用本文所提供的代码。如果您这样做了请告之我。我会很高兴看到您是如何使用它的。
