jQuery之自动完成组件的深入解析

简单实例复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=GB 2312/title自动完成选项/title链接rel='样式表type=' text/CSS ' href=' themes/base/jquery。ui。全部。CSS '/脚本类型=' text/JAVAScript ' src=' http : js/jquery-1。4 .2 .量滴js /脚本脚本类型=' text/JAVAScript ' src=' http 3360 js/jquery。ui。核心。js '/脚本就绪（函数(){/*初始化数据源*/var key=[' JSP '，' javascript '，' jquery '，' asp '，' ASP.NET '，' php '，]；$('#searchBox ').自动完成({ source : keys，minLength : 2 })；});/script style body { padd :30 px；}/style/head dyinput id=' search box '/body/html效果图

在上述代码中，在页面初始化的时候将页面上的输入框包装成jQuery对象，然后使用自动完成()方法将其包装成自动完成组件，同时初始化其最小响应长度选项和数据源选项2:自动完成组件的方法有搜索、打开、聚焦、选择、关闭、更改事件复制代码代码如下：函数（事件，ui) { //event:触发事件时的事件对象//ui，是用户界面对象，ui.item是一个包含标签和价值属性的对象}复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=GB 2312 '/title自动完成事件/title链接rel='样式表type=' text/CSS ' href=' themes/base/jquery。ui。全部。CSS '/脚本类型=' text/JAVAScript ' src=' http : js/jquery-1。4 .2 .量滴js /脚本脚本类型=' text/JAVAScript ' src=' http 3360 js/jquery。ui。核心。js '/脚本就绪（函数(){/*初始化数据源*/var key=[' c '，' c# '，' c '，' java '，' j2ee '，' jsp '，' javascript '，' jquery '，' asp '，' ASP.NET '，' ruby '，' vb '，' photo shop '，' php '亚麻，' flash ']；函数GetValues(key){ var ks=[]；if(key==' ')返回ks；//如果关键字为空字符串，返回一个空集合for(var I=0；ikeys . lenhei){ if(key[I]).(键)=0的索引){ ks[ks。长度]=键[I]；} }返回ks；}$('#searchBox ').自动完成({来源： []，搜索：函数(事件，ui){$('#searchBox ').自动完成(“选项”，“源”，GetValues($(this)).val()))；}});});/script style body { padding-top :30 px；} TD { text-align : center垂直对齐：毫米；padding:10px } # searchBox，# Search { padd :2 pxfont-size :15 px；} # searchBox { width:220px高度：17 px} #搜索{ width:80px}/style/head动态表格边框=' 0 ' align=' center ' trtd colspan=' 2 ' h1我的搜索引擎/h1/TD/tr tdinput id='搜索框'/TDT按钮id='搜索' Search/button/TD/tr/table/body/html效果图