|
九、 实现Web搜索搜索框
实现这个搜索框是很简单的。首先，你必须把websearch.php文件上传到你的web服务器(当然，必须安装PHP)。然后，你需要一个HTML 文档来引用所有的组件。msnWebSearch对象依赖于XParser类，这个类又依赖于zXml库(可从 www.nczonline.net/downloads/下载)。你必须引用下面这些文件：
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html; charset=utf-8" /＞
＜title＞Ajax WebSearch＜/title＞
＜link rel="stylesheet" type="text/css" href="css/websearch.css" /＞
＜script type="text/javascript" src="js/zxml.js"＞＜/script＞
＜script type="text/javascript" src="js/xparser.js"＞＜/script＞
＜script type="text/javascript" src="js/websearch.js"＞＜/script＞
＜/head＞＜body＞
＜/body＞
＜/html＞ |
为了执行搜索，应该把msnWebSearch.search()方法设置为该元素的onclick处理器：
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html; charset=utf-8" /＞
＜title＞Ajax WebSearch＜/title＞
＜link rel="stylesheet" type="text/css" href="css/websearch.css" /＞
＜script type="text/javascript" src="js/zxml.js"＞＜/script＞
＜script type="text/javascript" src="js/xparser.js"＞＜/script＞
＜script type="text/javascript" src="js/websearch.js"＞＜/script＞
＜/head＞＜body＞
＜a href="#" onclick='msnWebSearch.search(event，"\"Professional Ajax\"");
return false;'＞Search for "Professional Ajax"＜/a＞
＜br /＞＜br /＞＜br /＞＜br /＞
＜a href="#" onclick='msnWebSearch.search(event，"Professional Ajax");
return false;'＞Search for Professional Ajax＜/a＞
＜/body＞
＜/html＞ |
第一个新的链接执行一个针对准确词组"Professional Ajax"的搜索，而第二个链接将搜索这其中的各个单词。还要注意，在onclick事件中返回的是false-这强迫浏览器忽略掉href属性。点击这些链接将在光标位置绘制搜索框，并且就在此处显示你的搜索结果。
上一页 [1] [2] [3] [4] [5] |
