Hello World!
<div id="divMsg">Hello World!</div>
<input id="btnShow" type="button"  value="显示" />
<input id="btnHide" type="button"  value="隐藏" /><br/>
<input id="btnChange" type="button"  value="修改内容为 Hello World, too!" />
<script type="text/javascript" >
$("#btnShow").bind("click", function(event) { $("#divMsg").show(); });
$("#btnHide").bind("click", function(event) { $("#divMsg").hide(); });
$("#btnChange").bind("click", function(event) { $("#divMsg").html("Hello World, too!"); });
</script>



var div = document.getElementById("testDiv"); //Dom对象
var jQueryObject = $("#testDiv"); //jQuery包装集//Dom元素转换成jQuery包装集
vardiv=document.getElementById(“testDiv”);
vardomToJQueryObject=$(div);//jQuery包装集转Dom对象
vardomObject=$(“#testDiv”)[0];//domObject是一个 Dom对象!
$(“#testDiv”).each(function(){$(this).html(“修改内容”)}); //在遍历函数中的this也是Dom元素,


//使用Dom标准创建元素
var select = document.createElement("select");
select.options[0] = new Option("加载项 1", "value1");
select.options[1] = new Option("加载项 2", "value2");
select.size = "2";
var object = testDiv.appendChild(select); window.onload=function(){testDiv.innerHTML=
“<divstyle=\”border:solid1px#FF0000\”>动态创建的 div</div>”;
}//DOM加载完毕后添加元素,传统方法//使用 jQuery函数创建元素
$(“<div style=\”border:solid 1px #FF0000\”>动态创建的 div</div>”); //创建一个Div元素
$(“<div/>”).css(“border”,”solid1px#FF0000″).html(“动态创建的 div”).appendTo(testDiv); //jQuery内部使用document.createElement创建元素
$(“<divstyle=\”border:solid1px#FF0000\”>动态创建的 div</div>”).appendTo(testDiv);//jQuery使用动态创建的$(document).ready(function)方法
$(document).ready(
function(){testDiv.innerHTML=”<divstyle=\”border:solid1px#FF0000\”>使用动态创建的$(document).ready(function)方法</div>”;}
);//jQuery使用$(function)方法
$(
function(){testDiv.innerHTML+=”<divstyle=\”border:solid1px#FF0000\”>使用$(function)方法</div>”;}
);


$("p").eq(1); //获取匹配的第二个元素
$("p").filter(".selected"); //保留带有select类的元素//保留子元素中不含有ol 的元素
$(“div”).filter(function(index) {
return $(“ol”, this).size() == 0;
});


一个img标签:
<img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA" />通常开发人员习惯将id, src, alt等叫做这个元素的”属性”. 我将其称为”元素属性”.
但是在解析成DOM对象时, 实际浏览器最后会将标签元素解析成”DOM对象”, 并且将元素的”元素属性”存储为”DOM属性”.
两者是有区别的.
虽然我们设置了元素的src是相对路径:images/image.1.jpg
但是在”DOM属性”中都会转换成绝对路径:http://localhost/images/image.1.jpg.
甚至有些”元素属性”和”DOM属性”的名称都不一样,比如上面的元素属性class, 转换为DOM属性后对应className.
牢记, 在javascript中我们可以直接获取或设置”DOM属性”:<scripttype=”text/javascript”>
$(function(){
varimg1=document.getElementById(“hibiscus”);
alert(img1.alt);
img1.alt=”Changethealtelementattribute”;
alert(img1.alt);
})
</script>所以如果要设置元素的CSS样式类, 要使用的是”DOM属性”className”而不是”元素属性”class:
img1.className=”classB”;


$("p").addClass("selected"); //为匹配的元素加上selected类
$("p").removeClass("selected"); //从匹配的元素中删除selected类$(“p”).css(“color”); //取得第一个段落的color样式属性的值
$(“p”).css({ color: “#ff0011”, background: “blue” }css( name, value ); //将所有段落的字体颜色设为红色并且背景
$(“p”).css(“color”,”red”); //将所有段落字体设为红色


$("p").height(); //获取第一段的高
$("p").width(20); //将所有段落的宽设为20//获取匹配元素在当前窗口的相对偏移,此方法只对可见元素有效
var p = $(“p:last”); //获取第二段的偏移
var offset = p.offset();
p.html( “left: ” + offset.left + “, top: ” + offset.top );//获取匹配元素相对父元素的偏移,此方法只对可见元素有效
var p = $(“p:first”); //获取第一段的偏移
var position = p.position();
$(“p:last”).html( “left: ” + position.left + “, top: ” + position.top );


function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler) //在事件处理中根据事件源的某些数据进行特殊处理
(1) 使用自定义元素属性存储数据.
<divid=”testDiv5″customer=”customerdata1″>获取自定义数据‐1</div>
在事件处理函数中获取数据:
$(“#testDiv5”).bind(“click”,function(event){alert($(event.target).attr(“customer”));});(2) 使用脚本将数据传递给事件处理函数:
<divid=”testDiv6″>获取自定义数据‐2</div>
元素没有任何的自定义属性, 添加事件处理函数时将额外的数据传递:
$(“#testDiv6”).bind(“click”,{customer:”customerdata2″},function(event){alert(event.data.customer)});


/**
*虽然为元素绑定了某些事件, 比如click, 但是有时希望在程序中触发这些事件,  这两个函数可以实现此功能.
*主要区别是trigger会出发浏览器默认的动作, 而triggerHandler不会出发.
**/
<script type="text/javascript">
$(function() {
$("#old").click(function() {
$("#divResult").html("");
$("input").trigger("focus");
});
$("#new").click(function() {
$("#divResult").html("");
$("input").triggerHandler("focus");
});
$("input").focus(function() {
$("<span>Focused!</span>").appendTo("#divResult"); });
}
)
</script><button id=”old”> .trigger(“focus”)</button>
<button id=”new”> .triggerHandler(“focus”)</button><br /> <br />
<input type=”text” value=”To Be Focused” />
<div id=”divResult”></div>


<a href="http://google.com.cn">显示链接URL</a>
//event的target属性
<script type="text/javascript">
$("a[href=http://google.com.cn]").click(function(event){
alert(event.target.href);
});
</script>//data属性
$(“a”).each(function(i) {
$(this).bind(“click”, {index:i}, function(e){
alert(“my index is ” + e.data.index);
});
});//result属性
$(“p”).click(function(event) {
return “hey”
});
$(“p”).click(function(event) {
alert( event.result );
});
结果:”hey”


/***原始 Ajax**/
<script type="text/javascript">
$(function() {
$("#btnAjaxOld").click(function(event) {
var xhr = new AjaxXmlHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
document.getElementById("divResult").innerHTML = xhr.responseText;
}
}
xhr.open("GET", "data/AjaxGetCityInfo.aspx?resultType=html", true);
xhr.send(null);
});
});
//跨浏览器获取 XmlHttpRequest对象
function AjaxXmlHttpRequest() {
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
alert("您的浏览器不支持AJAX！");
return false;
}
}
return xmlHttp;
}
</script>
<button id="btnAjaxOld">原始 Ajax调用</button>
<div id="divResult"></div>/**jQuery中的 Ajax**/
//上面的代码可以修改如下：
<script type=”text/javascript”>
$(function() {
$(“#btnAjaxJquery”).click(function(event) {
$(“#divResult”).load(“data/AjaxGetCityInfo.aspx”, { “resultType”: “html” });
});
})
</script>
<button id=”btnAjaxJquery”>使用jQuery 的 load 方法</button>
<div id=”divResult”></div>


/***load( url, [data], [callback] )**/
//返回: jQuery包装集
//说明: load方法能够载入远程 HTML 文件代码并插入至 DOM 中。
//默认使用 GET 方式, 如果传递了data参数则使用Post方式.
//传递附加参数时自动转换为 POST 方式。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，
//DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector", 默认的选择器是"body>*".  <script type=”text/javascript”>
$(function() {
$(“#btnAjaxGet”).click(function(event) {
//发送 Get 请求
$(“#divResult”).load(“../data/AjaxGetMethod.aspx?param=btnAjaxGet_click” + “&timestamp=” + (new Date()).getTime());
});
$(“#btnAjaxPost”).click(function(event) {
//发送 Post 请求
$(“#divResult”).load(“../data/AjaxGetMethod.aspx”, { “param”: “btnAjaxPost_click” });
});
$(“#btnAjaxCallBack”).click(function(event) {
//发送 Post 请求, 返回后执行回调函数.
$(“#divResult”).load(“../data/AjaxGetMethod.aspx”, { “param”: “btnAjaxCallBack_click” },
function(responseText, textStatus, XMLHttpRequest) {
responseText = ” Add in the CallBack Function! <br/>” + responseText
$(“#divResult”).html(responseText); //或者: $(this).html(responseText);
});
});
$(“#btnAjaxFiltHtml”).click(function(event) {
//发送 Get 请求, 从结果中过滤掉 “鞍山” 这一项
$(“#divResult”).load(“../data/AjaxGetCityInfo.aspx?resultType=html” + “&timestamp=” + (new Date()).getTime() + ” ul>li:not(:contains(‘鞍山’))”);
});
});
</script>
<button id=”btnAjaxGet”>使用Load执行Get请求</button><br />
<button id=”btnAjaxPost”>使用Load执行Post请求</button><br />
<button id=”btnAjaxCallBack”>使用带有回调函数的Load方法</button><br />
<button id=”btnAjaxFiltHtml”>使用selector过滤返回的HTML内容</button> <br />
<div id=”divResult”></div>
//提示:我们要时刻注意浏览器缓存,  当使用 GET 方式时要添加时间戳参数 (net Date()).getTime()
//来保证每次发送的 URL 不同, 可以避免浏览器缓存.
//提示: 当在 url 参数后面添加了一个空格, 比如”   “的时候, 会出现”无法识别符号”的错误, 请求还是能
//正常发送. 但是无法加载 HTML 到 DOM. 删除后问题解决./***jQuery.get( url, [data], [callback], [type] )**/
//返回: XMLHttpRequest//说明: 通过远程HTTP GET请求载入信息。
//这是一个简单的GET请求功能以取代复杂$.ajax 。请求成功时可调用回调函数。
//如果需要在出错时执行函数，请使用 $.ajax。讲解:
此函数发送Get请求, 参数可以直接在url 中拼接, 比如:
$.get(“../data/AjaxGetMethod.aspx?param=btnAjaxGet_click”);
或者通过data 参数传递:
$.get(“../data/AjaxGetMethod.aspx”,{“param”:”btnAjaxGet2_click”});
两种方式效果相同, data参数会自动添加到请求的url中
如果url中的某个参数, 又通过data参数传递, 不会自动合并相同名称的参数.
回调函数的签名如下:
function(data,textStatus){
//data 是返回的数据, 可以是xmlDoc,jsonObj,html,text,etc…
//testStatus表示状态码, 可能是如下值: “timeout”,”error”,”notmodified”,”success”,”parsererror”
this;//this 是获取 options 对象的引用.
}//type 参数是指data数据的类型, 可能是下面的值: “xml”, “html”, “script”, “json”, “jsonp”,  “text”.
//默认为”html”.
//jQuery.getJSON( url, [data], [callback] ) 方法就相当于 jQuery.get(url, [data],[callback], “json”)
/***jQuery.getJSON( url, [data], [callback] )**/
//返回: XMLHttpRequest
//说明: 通过HTTP GET请求载入JSON数据。相当于: jQuery.get(url, [data], [callback], “json”)讲解:
getJSON函数仅仅将get函数的type参数设置为”JSON”而已. 在回调函数中获取的数据已经是按照JSON格式解析后的对象了:
$.getJSON(“../data/AjaxGetCityInfo.aspx”,{“resultType”:”json”},function(data,textStatus){
alert(data.length);
alert(data[0].CityName);
});

服务器端返回的字符串如下:
[{“”pkid””:””0997″”,””ProvinceId””:””XJ””,””CityName””:””阿克苏””,””CityNameEn””:””Akesu””,””PostCode””:””843000″”,””isHotCity””:false}, {“”pkid””:””0412″”,””ProvinceId””:””LN””,””CityName””:””鞍山””,””CityNameEn””:””Anshan””,””PostCode””:””114000″”,””isHotCity””:false}]
示例中返回的是一个数组, 使用data.length可以获取数组的元素个数,  data[0]访问第一个元素,
data[0].CityName访问第一个元素的CityName属性.

/***jQuery.getScript(url, [callback])**/
//返回: XMLHttpRequest
//说明: 通过 HTTP GET 请求载入并执行一个JavaScript文件，相当于：jQuery.get(url, null, [callback], “script”)

<button id=”btnAjaxGetScriptCross”>btnAjaxGetScriptCross</button><br/><br/>
<script type=”text/javascript”>
$(“#btnAjaxGetScriptCross”).click(function(event) {
$.getScript(“getjson.js”,
function(data, textStatus){
alert(data);
alert(textStatus);
alert(this.url);
});
});
</script>

/***jQuery.post( url, [data], [callback], [type] )**/
//返回: XMLHttpRequest

//说明: 通过远程 HTTP POST 请求载入信息。
//这是一个简单的GET请求功能以取代复杂$.ajax 。请求成功时可调用回调函数。
//如果需要在出错时执行函数，请使用 $.ajax。
//具体用法和get相同, 只是提交方式由”GET”改为”POST”.

/***jQuery.ajax( options )**/
//返回: XMLHttpRequest
//说明: 通过 HTTP 请求加载远程数据。
//$.ajax() 返回其创建的XMLHttpRequest对象。大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。
//$.ajax() 只有一个参数：参数 key/value 对象，包含各配置及回调函数信息

讲解:
这是jQuery中Ajax的核心函数, 上面所有的发送Ajax请求的函数内部最后都会调用此函数.
options参数支持很多参数，使用这些参数可以完全控制ajax请求.
在Ajax回调函数中的this对象也是options对象.
因为平时使用最多的还是简化了的get和post函数, 所以在此不对options参数做详细讲解了.

/***jQuery.ajaxSetup( options )**/
//说明: 设置全局 AJAX 默认options选项
//有时我们的希望设置页面上所有Ajax属性的默认行为.那么就可以使用此函数设置options选项, 此后所有的Ajax请求的默认options将被更改.

<button id=”btnAjax”>不传递参数调用 ajax()方法</button><br/>
<button id=”btnGet”>不传递参数调用 get()方法</button><br/>
<button id=”btnPost”>不传递参数调用 post()方法</button><br/>
<button id=”btnGet2″>传递参数调用 get()方法,使用全局的默认回调函数</button><br/><br/>
<div id=”divResultAjax” style=”height:10px; display:block”></div><br/>
<script type=”text/javascript”>
$(document).ready(function(){
$.ajaxSetup({
url:”ajax.php”,
data:{“param”:”default”},
global:false,
type:”POST”,
success:function(data,textStatus){alert(data ); $(“#divResultAjax”).html(data);}
});
$(“#btnAjax”).click(function(event){$.ajax();});
$(“#btnGet”).click(function(event){$.get();});
$(“#btnPost”).click(function(event){$.post();});
$(“#btnGet2”).click(function(event){$.get(“ajax.php”,{“param”:”other”});});
});
</script>
//注意：
//当使用get()或者post()方法时, 除了type参数将被重写为”GET”或者”POST”外,
//其他参数只要不传递都是使用默认的全局option.
//如果传递了某一个选项, 比如最后一个按钮传递了url 和参数, 则本次调用会以传递的选项为准.
//没有传递的选项比如回调函数还是会使用全局option设置值.

/***jQuery.serialize()**/
<p id=”results”><b>Results: </b> </p>
<form>
<select name=”single”>
<option>Single</option>
<option>Single2</option>
</select>
<select name=”multiple” multiple=”multiple”>
<option selected=”selected”>Multiple</option>
<option>Multiple2</option>
<option selected=”selected”>Multiple3</option>
</select><br/>
<input type=”checkbox” name=”check” value=”check1″/> check1
<input type=”checkbox” name=”check” value=”check2″ checked=”checked”/> check2
<input type=”radio” name=”radio” value=”radio1″ checked=”checked”/> radio1
<input type=”radio” name=”radio” value=”radio2″/> radio2
</form>
<script type=”text/javascript”>
$(“#results”).append($(“form”).serialize());
</script>

/***jQuery.serializeArray()**/
//返回: Array<Object>, JSON对象而非JSON字符串

//说明: 在JSON官网上没有找到合适的JSON编译器, 最后选用了jquery.json这个jQuery插件:
//http://code.google.com/p/jquery-json/
//使用起来异常简单:
<span id=”resultserializeArray”><b>Result:</b></span>
<script type=”text/javascript”>
var thing = { plugin: ‘jquery-json’, version: 2.2 };
var encoded = $.toJSON( thing ); // {“plugin”:”jquery-json”,”version”:2.2}
var plugin = $.evalJSON( encoded ).plugin;// jquery-json
var version = $.evalJSON(encoded).version;// 2.2
$(“#resultserializeArray”).append(‘<br/>JSON对象:’ + thing + ‘<br/>JSON字符串:’ + encoded + ‘<br/>plugin:’ + plugin + ‘<br/>version:’ + version);

//使用serializeArray(), 再配合$.toJSON方法,我们可以很方便的获取表单对象的JSON, 并且转换为JSON字符串:
$(“#results”).html( $.toJSON( $(“form”).serializeArray() ));
//结果为:
[{“name”: “single”, “value”: “Single”}, {“name”: “param”, “value”: “Multiple”},
{“name”: “param”, “value”: “Multiple3”}, {“name”: “check”, “value”: “check2”},
{“name”: “radio”, “value”: “radio1”}]
</script>


//功能：
//单击图中的"显示提示文字"按钮, 在按钮的下方显示一个弹出层.
//单击任何空白区域或者弹出层,弹出层消失. <div>
<br/>
<button id=”btnShowPop”>通过弹出层提示文字</button>
</div>
<!–弹出层–>
<div id=”divPop” style=”background-color:#f0f0f0; padding:10px; border:solid 4px pink; position:absolute; display:none; width:300px; height:100px;”>
<div style=”text-align:center;”>这里是提示文字，点击此层或其他空白页面隐藏此层。</div>
</div>
<script type=”text/javascript”>
$(document).ready(function(){
//动画速度
var speed=500;//绑定事件处理
$(“#btnShowPop”).click(function(event){
//取消事件冒泡
event.stopPropagation();
//设置弹出层位置，否则弹出层将显示后立刻关闭
var offset=$(event.target).offset();
//$(“#divPop”).css({top:offset.top+$(event.target).height()+”px”,left:offset.left});
$(“#divPop”).css({top:offset.top+$(event.target).outerHeight()+”px”,left:offset.left+$(event.target).outerWidth()+”px”});//动画显示
$(“#divPop”).show(speed);//切换弹出层的显示状态
//$(“#divPop”).toggle(speed);
});//单击空白区域隐藏弹出层
$(document).click(function(event){$(“#divPop”).hide(speed)});//单击弹出层则自身隐藏
$(“#divPop”).click(function(event){$(“#divPop”).hide(speed)});
});
</script>


/***基本动画函数**/
//上例中使用的show()和hide()是我们使用最多的基本动画函数.
show(), show(speed,[callback]), hide(), hide(speed,[callback]), toggle(), toggle(speed,[callback]);//基本的动画函数都提供了无参数的版本,  表示不适用动画切换元素的显示状态:
$(“#divPop”).show();
$(“#divPop”).hide();
$(“#divPop”).toggle();//都提供了两个参数的重载,  因为回调函数可以省略, 所以可以像开篇实例中使用的, 传入一个数值作为唯
//一参数, 则会在参数规定的时间内用动画效果显示/隐藏元素:
$(“#divPop”).show(200);
$(“#divPop”).hide(“fast”);
$(“#divPop”).toggle(“slow”);//如果传递了200, 表示图层会在200毫秒内通过渐变的形式显示出来.
//speed参数可以使用三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如：1000).三个函数都可以传入回调函数callback,签名如下:
functioncallback(){
this;//domelement
}toggle()函数的使用见上例注释行
toggle()函数可以传递一个boolean值的参数, 比如: toogle(true)等同于show(), toogle(fasle)等同于hide()./***滑动动画函数**/
//slideDown()就是show的滑动效果版本, slideUp()就是hide的滑动效果版本, slideToggle()就是toggle的滑动效果版本.
参数完全相同:
$(“#divPop”).slideDown(“200”);
$(“#divPop”).slideUp(“fast”);
$(“#divPop”).slideToggle(“slow”);

/***淡入淡出动画函数**/
fadeIn(speed, [callback])
fadeOut(speed[callback])
fadeTo(speed, opacity, [callback])


animate( params, [duration], [easing], [callback] )
animate( params, options )
stop( [clearQueue], [gotoEnd] )$(“#block”).animate({
width: “90%”,
height: “100%”,
fontSize: “10em”,
borderWidth: 10
}, 1000 );


jQuery.fx.off
//把这个属性设置为true可以立即关闭所有动画(所有效果会立即执行完毕)jQuery.fx.off = true;
$(“#divPop”).show(1000);
//虽然使用了动画效果的show函数, 但是因为关闭了所有动画, 所以div会立刻显示出来而没有渐变效果.


//jQuery是脚本库而不是脚本框架, 无法限制使用者如何使用,  所以很容易让页面上的脚本变得混乱.
//在没有找到何时的脚本管理框架前, 使用如下方式在页面上使用脚本:
//1. 在页面底部添加<script>区域,  两个function分别放置 "事件绑定" 和  "加载时执行" 的语句.
//即使在加载时执行的javascript也必须要保证DOM加载完毕后执行. 所以两个function都被嵌套在$()中保证在DOM加载完毕后调用.
//2. 应尽量避免在头部加载脚本. 必须在头部加载的可以在页面head 中添加一个script区域.
//3."自定义函数"要放在"事件绑定"和"加载时执行"语句块之上, 并且不需要包含在$()中.//在页面底部添加<script>区域
<script type=”text/javascript”>
//用户自定义方法
funectiondemoMthod(event){
$(“#divMsg”).hide(500);
}//事件绑定
$(function(){
$(“#btnShow”).bind(“click”,function(event){$(“#divMsg”).show(500);});
$(“#btnHide”).bind(“click”,demoMethod);
$(“#btnChange”).bind(“click”,function(event){$(“#divMsg”).html(“HelloWorld,too!”);});
});//加载时执行的语句
$(function(){
$(“#btnShow”).attr(“value”,”被修改后的显示按钮”)
});
</script>


//我们可以使用  jQuery.support.boxModel 属性来获取浏览器是否使用了W3C盒式模型.
//true表示使用W3C boxModel.
jQuery.support.boxModel//判断是不是苹果浏览器
if ($.browser.safari) {
alert(“this is safari!”);
}//显示当前 IE 浏览器版本号。
if ( $.browser.msie )
alert( $.browser.version );//建议使用 jQuery.support.boxModel代替如下：
$.boxModel


/***jQuery UI介绍**/
jQuery UI 是 jQuery 的一部分, 是在jQuery之上的一套专门用于UI 交互的类库.
使用jQuery UI可以实现底层交互, 各种高级特效, 动画, 并且可定制主题.
我们可以用它轻松的构建高度交互的Web 应用程序.
官方首页:
http://jqueryui.con/
下载:
http://jqueryui.com/download
示例和文档:
http://jqueryui.com/demos/
皮肤:
http://jqueryui.com/themeroller/
jQuery UI 的在线网站十分强大. 首先就是在下载时可以组装自己想要的功能定制下载//实例点击上面的链接


/***表单验证插件 validate**/
//最常用的jQuery插件. 分别用于表单验证和自动完成提示(类似google suggest).插件首页:
http://bassistance.de/jquery-plugins/jquery-plugin-validation/插件文档:
http://docs.jquery.com/Plugins/Validation配置说明:
http://docs.jquery.com/Plugins/Validation/validate#options/***自动完成插件 autocomplet**/
插件首页:
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/插件文档:
http://docs.jquery.com/Plugins/Autocomplete配置说明:
http://docs.jquery.com/Plugins/Autocomplete/autocomplete#toptions