您的位置：首页 > 其它

Script.aculo.us开发系列(六):AutoComplete控件

2007-09-14 16:57 537 查看

Effects之后必然会提到位于controls.js下的两个控件:AutoComplete和InPlaceEditor,这两个控件在Ajax时代是很受大家的欢迎的,在这篇文章中会介绍AutoComplete控件的使用.

声明方式

new Ajax.AutoComplete("TextBoxId","ChoicesId","RequestUrl",options)
options参数

paramName:传递参数的名称,默认的会传递文本框的name,如果设置该属性为key则请求的页面参数格式为key=value
tokens: 数组或者字符串,字数清零标志.默认为[],若minChars设置为2,tokens设置为[' '],这样在你键入"ab cd"键入"ab"之后会请求服务器,而且会定时监听,这个时间就是frequency属性值,但是键入" " 之后会停止请求服务器,因为它会认为你现在没有键入字符,键入"cd"后继续请求服务器并监听.
frequency:监听周期,单位为秒,默认为0.4s
minChars:请求服务器最少字符,默认为1
indicator:页面元素的Id, 正在请求服务器,在请求服务器前显示,请求完隐藏.

请求页面以及显示

建议请求的页面返回的html代码为,

<ul>

<li>......</li>

<li>......</li>

.....

</ul>

AutoComplete将请求回来的responseText直接赋值给$(choicesId).innerHTML,这样做无非是用于css控制弹出的提示的样式,并且约定鼠标滑上的元素的class="selected"

典型实例

AutoComplete.html

<script type="text/javascript" src="lib/prototype.js"></script>

<script type="text/javascript" src="lib/scriptaculous.js?load=effects,controls"></script>

<script type="text/javascript">

function init()

{

new Ajax.Autocompleter("txtSource","choices","AutoSuggest.asp",

{

paramName:'ssssssssss',

indicator:'indicator',

minChars:2,

tokens:[' '],//也可以为' '

frequency:0.1,

afterUpdateElement:handleAfterUpdateElement

}

);

}

Event.observe(window,'load',init);

function handleAfterUpdateElement(element,selectedElement)

{

//element is the input#txtSource

//selectedElement is the item you Selected, here is li.selected

}

</script>

<style type="text/css">

/*提示框的样式*/

#choices,input{ border:solid 1px #000000; width:300px;}

/*提示框下的ul标签样式*/

#choices ul{ list-style-type:none; padding:0px; margin:0px; background-color:#FFFFFF;}

/*提示框下的ul标签下的li样式*/

#choices ul li{ padding:2px;}

/*鼠标划过的li的样式*/

#choices ul li.selected{ background-color:#f8f8f8;}

</style>

</head>

<body>

<h2>AutuComplete using Script.Aculo.Us</h2>

<div>



<input id="txtSource" name="source" type="text"/>



<span id="indicator">

<img src="Images/loading.gif" style="display:none;" />

</span>

<input type="submit" name="button" id="button" value="提交" style="width:100px;" />



<div id="choices"></div>

</div>

AutoSuggest.asp:看不懂没有关系,关键是要知道获得文本框输入的值用Request("sssssssss")

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>

<ul>

<%

dim i

i=10

dim s

set s=Request("ssssssssss")

while(i>0)

%>

<li><%= s&"__" %><%= Now() %>(<%= i %>)</li>

<%

i=i-1

wend

%>

</ul>
本例运行

最后的思考

上面的两张图一是运行时的界面,第二张截图是在FireFox下的一个插件FireBug下查看的请求信息

上面截的两张图旨在说明两个问题,一个是paramName的设置和服务器短返回的数据,二是图上已经有一个大家或许不满意的地方,按照中文的习惯,在第一张图这种情况下不应该请求服务器的,这样的请求是没有意义的,还希望走过路过的朋友一起改进这个问题

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

Script.aculo.us开发系列(六):AutoComplete控件

声明方式

请求页面以及显示

相关API

典型实例

最后的思考