本文主要是介绍jQueryUI1.10.0新版本学习(widget-Autocomplete),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
本篇文章记录了新版jQueryUI中自动完成控件的用法,更多的可以参见官网。
1.基本用法
为HTML的input标签加入自动完成功能。所需要编写的HTML格式如下:
<!DOCTYPE html><html lang="zh_CN"><head><meta charset="utf-8"><title>jQueryUI学习</title><script type="text/javascript" src="jQueryUI/js/jquery-1.9.0.js"></script><script type="text/javascript" src="jQueryUI/js/jquery-ui-1.10.0.custom.js"></script><link rel="stylesheet" href="jQueryUI/css/smoothness/jquery-ui-1.10.0.custom.css" type="text/css" /><link rel="stylesheet" href="css/main.css" type="text/css"/><script src="js/main.js"></script></head><body><div><label for="tags">标签索引: </label><input id="tags" /></div></body>
</html>
然后在js中为input使用自动完成控件Autocomplete
$(document).ready(function(){//设置提供自动完成功能的字符串数组var availableTags = ["ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"];//为input加入自动完成功能$( "#tags" ).autocomplete({source: availableTags});});
简单说一下,这里首先定义了一个字符串数组,用于存储自动完成字符串,当然这个字符串也可以通过数据库等获得。
然后在input上调用autocomplete方法,设定其自动完成源数据source为之前设定的字符串数组。然后就可以了,效果如下:当输入“ja”时
这篇关于jQueryUI1.10.0新版本学习(widget-Autocomplete)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!