开发学院网页设计 JavaScript Script.aculo.us开发系列(六):AutoComplete控件阅读

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

　2010-09-14 13:38:34　来源：WEB开发网　　　

核心提示： 典型实例AutoComplete.html<scripttype="text/javascript"src="lib/prototype.js"></script><scripttype="text/javas

典型实例AutoComplete.html

<scripttype="text/javascript"src="lib/prototype.js"></script> <scripttype="text/javascript"src="lib/scriptaculous.js?load=effects,controls"></script> <scripttype="text/javascript"> functioninit() { 　　newAjax.Autocompleter("txtSource","choices","AutoSuggest.asp", 　　　　{ 　　　　　　paramName:'ssssssssss', 　　　　　　indicator:'indicator', 　　　　　　minChars:2, 　　　　　　tokens:[''],//也可以为'' 　　　　　　frequency:0.1, 　　　　　　afterUpdateElement:handleAfterUpdateElement 　　　　} 　　); } Event.observe(window,'load',init); functionhandleAfterUpdateElement(element,selectedElement) { 　　//elementistheinput#txtSource 　　//selectedElementistheitemyouSelected,hereisli.selected } </script> <styletype="text/css"> /*提示框的样式*/ #choices,input{border:solid1px#000000;width:300px;} /*提示框下的ul标签样式*/ #choicesul{list-style-type:none;padding:0px;margin:0px;background-color:#FFFFFF;} /*提示框下的ul标签下的li样式*/ #choicesulli{padding:2px;} /*鼠标划过的li的样式*/ #choicesulli.selected{background-color:#f8f8f8;} </style> </head> <body> <h2>AutuCompleteusingScript.Aculo.Us</h2> <div> 　　 　　<inputid="txtSource"name="source"type="text"/> 　　 　　<spanid="indicator"> 　　　　<imgsrc=http://tech.ddvip.com/2009-02/"Images/loading.gif"style="display:none;"/> 　　</span> 　　<inputtype="submit"name="button"id="button"value="提交"style="width:100px;"/> 　　 　　<divid="choices"></div> </div>