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


Posted in Javascript onJune 19, 2013

简单实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>AutocompleteOption</title>
<link rel="stylesheet" type="text/css" href="themes/base/jquery.ui.all.css"/>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/jquery.ui.core.js"></script>
<script type="text/javascript" src="JS/jquery.ui.widget.js"></script>
<script type="text/javascript" src="JS/jquery.ui.position.js"></script>
<script type="text/javascript" src="JS/jquery.ui.autocomplete.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 /* 初始化数据源 */
 var keys = ["jsp", "javascript", "jquery", "asp", "asp.net", "php",];
 $('#searchBox').autocomplete({
     source : keys,
  minLength : 2
 });
});
</script>
<style>
body{ padding:30px; }
</style>
</head>
<body>
<input id="searchBox" />
</body>
</html>

效果图:
jQuery之自动完成组件的深入解析
在上述代码中,在页面初始化的时候将页面上的输入框包装成jQuery对象,然后使用autocomplete()方法将其包装成自动完成组件,同时初始化其最小响应长度选项和数据源选项
2:自动完成组件的方法
有Search, Open, Focus, Select, Close, Change事件
   function(event, ui) {
      //event: 触发事件时的事件对象
    //ui, 是用户界面对象,ui.item是一个包含label和value属性的对象
  }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>AutocompleteEvent</title>
<link rel="stylesheet" type="text/css" href="themes/base/jquery.ui.all.css"/>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/jquery.ui.core.js"></script>
<script type="text/javascript" src="JS/jquery.ui.widget.js"></script>
<script type="text/javascript" src="JS/jquery.ui.position.js"></script>
<script type="text/javascript" src="JS/jquery.ui.autocomplete.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 /*
  初始化数据源
 */
 var keys = ["c++", "c#", "c",
    "java", "j2ee", "jsp", "javascript", "jquery",
    "asp", "asp.net",
    "ruby", "vb.net",  "visual basic", "vb",
    "photo shop", "php",
    "flax", "flash"];
 function GetValues(key){
  var ks = [];  if(key == "") return ks;  //如果关键字为空字符串,返回一个空集合
  for(var i = 0; i<keys.length; i++){
   if(keys[i].indexOf(key) == 0){
    ks[ks.length] = keys[i];
   }   
  }
  return ks;
 }
 $('#searchBox').autocomplete({
     source : [],
  search : function(event,ui){
   $('#searchBox').autocomplete(
    "option","source",GetValues($(this).val())
    );
  }
 });
});
</script>
<style>
body{padding-top:30px;}
td{ text-align:center; vertical-align:middle; padding:10px;}
#searchBox,#Search{ padding:2px; font-size:15px;}
#searchBox{width:220px;height:17px;}
#Search{width:80px;}
</style>
</head>
<body>
<table border="0" align="center">
<tr>
 <td colspan="2"><h1>My Search Engine</h1></td>
</tr>
<tr>
 <td><input id="searchBox" /></td>
 <td><button id="Search" >Search</button></td>
</tr>
</table>
</body>
</html>

效果图:
  jQuery之自动完成组件的深入解析
Javascript 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Oct 11 Javascript
密码框显示提示文字jquery示例
Aug 29 Javascript
jquery批量设置属性readonly和disabled的方法
Jan 24 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
Mar 28 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
微信小程序实战之登录页面制作(5)
Mar 30 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
利用js给datalist或select动态添加option选项的方法
Jan 25 Javascript
在vant中使用时间选择器和popup弹出层的操作
Nov 04 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 Javascript
jQuery之折叠面板的深入解析
Jun 19 #Javascript
jQuery之选择组件的深入解析
Jun 19 #Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 #Javascript
JavaScript中把数字转换为字符串的程序代码
Jun 19 #Javascript
解析JavaScript中的标签语句
Jun 19 #Javascript
解析window.open的使用方法总结
Jun 19 #Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 #Javascript
You might like
DC四月将推出百页特刊漫画 纪念小丑诞生80周年
2020/04/09 欧美动漫
我的php学习笔记(毕业设计)
2012/02/21 PHP
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
php实现的简易扫雷游戏实例
2015/07/09 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
php 实现银联商务H5支付的示例代码
2019/10/12 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
node.js中的fs.readSync方法使用说明
2014/12/17 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
seajs中最常用的7个功能、配置示例
2017/10/10 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
js实现简单的倒计时
2021/01/28 Javascript
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
详解python statistics模块及函数用法
2019/10/27 Python
python实现logistic分类算法代码
2020/02/28 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
英国电子专家:maplin
2019/09/04 全球购物
简单说说tomcat的配置
2013/05/28 面试题
自我鉴定书范文
2013/10/02 职场文书
同事打架检讨书
2014/02/04 职场文书
2014年保育员工作总结
2014/12/02 职场文书
使用MybatisPlus打印sql语句
2022/04/22 SQL Server