jQueryUI1.10.0新版本学习（widget-Autocomplete）

本文主要是介绍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”时