构建即时搜索 UI
使用 JavaScript jQuery 库可以轻松构建即时搜索 UI。查看 清单 4，您就可以明白我的意思。
清单 4. 使用 HTML 响应的即时页面
<html><head>
<script src="jquery-1.4.2.min.js"></script>
<link rel="stylesheet" href="styles.css" type="text/css" />
<title>Instant Search - HTML Based</title>
</head>
<body>
Simpsons Search: <input type="text" id="term" />
<div id="results">
</div>
<script>
$(document).ready(function() {
$('#term').keyup(function() {
$.get('search_html.php?q='+escape($('#term').val()), function(data) {
$('#results').html(data);
} );
} );
} );
</script>
</body>
</html>
<script src="jquery-1.4.2.min.js"></script>
<link rel="stylesheet" href="styles.css" type="text/css" />
<title>Instant Search - HTML Based</title>
</head>
<body>
Simpsons Search: <input type="text" id="term" />
<div id="results">
</div>
<script>
$(document).ready(function() {
$('#term').keyup(function() {
$.get('search_html.php?q='+escape($('#term').val()), function(data) {
$('#results').html(data);
} );
} );
} );
</script>
</body>
</html>
在页面的顶部，清单 4 包括 jQuery 库和 CSS 样式表，以使输出更美观。页面的主体包括搜索关键词的输入字段和保存此输出的结果 div。
工作的大部分都在页面底部的 JavaScript 部分完成。它首先调用文档中的 ready 函数。此调用可确保在页面准备就绪前都不执行内部 JavaScript。内部 JavaScript 使用搜索关键词输出对象中的 keyup 函数来监控搜索关键词字段中的关键字键入。在文本字段变更时，将对服务器调用 Ajax get 方法。通过使用 html 函数，来自此调用的数据响应将用于填充结果元素。
如果 JavaScript 代码看上去像线路噪声，没关系。这实际上就是 JavaScript 的技术现状，该代码需要复查线路，所以代码规模最好保持得小一些。
虽然您可以在没有 jQuery 库的情况下完成这些工作，但是使用该库的价值在于，该代码非常简洁且所有跨平台工作都已经为您完成。您不必担心 Internet Explorer® 与 Safari 或 Firefox;只需编写一次代码然后将其用于任何地方。
