在網頁上有一些搜索的文本輸入框,用戶可以在其中輸入內容,然后進行查找。然而如果用戶并不熟悉網站的內容,他應該輸入那些信息來查找呢?如果能夠在用戶輸入某些內容時顯示包含這些內容并與網站相關的信息,將會大大提高用戶的方便性,并且讓用戶對網站的內容有進一步的了解,增強交互性。
autoassist庫就是針對以上需求而產生的。如果要使用autoassist庫,你可以從http://capxous.com/上下載http://capxous.com/autoassist-0.8.zip,其中javascripts目錄下的autoassist.js和prototype.js就是相關的庫文件。
思路:在頁面上的一個輸入框中,當用戶輸入內容的時侯,網頁應該做出響應,將用戶所輸內容提交給一個后臺頁面或程序處理;然后將此內容與網站中的信息(固定信息或數據庫中的信息)相比較,若找到相關內容,則使的輸入框彈出下拉提示信息,用戶可選擇下拉提示信息,輸入框中內容也不再是用戶所輸內容,而是所選的下拉信息。
<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>