文章内容
利用PHP＋javascript打造AJAX搜索窗
作者：未知 来源：网络收集 录入：管理员
现在，让我们来看一下如何实现搜索框。
九、 实现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]