在網(wǎng)頁(yè)上有一些搜索的文本輸入框,用戶可以在其中輸入內(nèi)容,然后進(jìn)行查找。然而如果用戶并不熟悉網(wǎng)站的內(nèi)容,他應(yīng)該輸入那些信息來(lái)查找呢?如果能夠在用戶輸入某些內(nèi)容時(shí)顯示包含這些內(nèi)容并與網(wǎng)站相關(guān)的信息,將會(huì)大大提高用戶的方便性,并且讓用戶對(duì)網(wǎng)站的內(nèi)容有進(jìn)一步的了解,增強(qiáng)交互性。
autoassist庫(kù)就是針對(duì)以上需求而產(chǎn)生的。如果要使用autoassist庫(kù),你可以從http://capxous.com/上下載http://capxous.com/autoassist-0.8.zip,其中javascripts目錄下的autoassist.js和prototype.js就是相關(guān)的庫(kù)文件。
思路:在頁(yè)面上的一個(gè)輸入框中,當(dāng)用戶輸入內(nèi)容的時(shí)侯,網(wǎng)頁(yè)應(yīng)該做出響應(yīng),將用戶所輸內(nèi)容提交給一個(gè)后臺(tái)頁(yè)面或程序處理;然后將此內(nèi)容與網(wǎng)站中的信息(固定信息或數(shù)據(jù)庫(kù)中的信息)相比較,若找到相關(guān)內(nèi)容,則使的輸入框彈出下拉提示信息,用戶可選擇下拉提示信息,輸入框中內(nèi)容也不再是用戶所輸內(nèi)容,而是所選的下拉信息。
<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為用
戶所輸內(nèi)容找出下拉信息后返回;當(dāng)用戶點(diǎn)擊后改變input中的值
});
});//將用戶所輸內(nèi)容傳遞到action中的函數(shù)
</script>
</head>
<body>
<input type="text" name="userName" id="userName"/>
</body>
</html>