在网页上有一些搜索的文本输入框,用户可以在其中输入内容,然后进行查找。然而如果用户并不熟悉网站的内容,他应该输入那些信息来查找呢?如果能够在用户输入某些内容时显示包含这些内容并与网站相关的信息,将会大大提高用户的方便性,并且让用户对网站的内容有进一步的了解,增强交互性。
autoassist库就是针对以上需求而产生的。如果要使用autoassist库,你可以从http://capxous.com/上下载http://capxous.com/autoassist-0.8.zip,其中javascripts目录下的autoassist.js和prototype.js就是相关的库文件。社区门户"QD Zr9bF3d
思路:在页面上的一个输入框中,当用户输入内容的时侯,网页应该做出响应,将用户所输内容提交给一个后台页面或程序处理;然后将此内容与网站中的信息(固定信息或数据库中的信息)相比较,若找到相关内容,则使的输入框弹出下拉提示信息,用户可选择下拉提示信息,输入框中内容也不再是用户所输内容,而是所选的下拉信息。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf- 8">
<title>Insert title here</title>
<script type="text/javascript" src="javascripts/prototype.js"></s cript>
<script type="text/javascript" src="javascripts/autoassist.js"></ script>
<link rel="stylesheet" type="text/css" href="styles/autoassist.cs s" />
<script language="javascript">
Event.observe(window, "load", function() {
var aa = new AutoAssist("userName", function() {
return "autoassist.action?q=" + this.txtBox.value;//q为用
户所输内容找出下拉信息后返回;当用户点击后改变input中的值
});
});//将用户所输内容传递到action中的函数
</script>
</head>
<body>
<input type="text" name="userName" id="userName"/>
</body>
</html>