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方法和技巧大全
Dec 27 Javascript
Knockoutjs的环境搭建教程
Nov 26 Javascript
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 Javascript
jQuery实现“扫码阅读”功能
Jan 21 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 Javascript
ES6模块化的import和export用法方法总结
Aug 08 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 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
天津市收音机工业发展史
2021/03/04 无线电
如何去掉文章里的 html 语法
2006/10/09 PHP
一些php技巧与注意事项分析
2011/02/03 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
jquery ajaxSubmit 异步提交的简单实现
2014/02/28 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
drag-and-drop实现图片浏览器预览
2015/08/06 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
基于jstree使用AJAX请求获取数据形成树
2017/08/29 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
Vue项目实现换肤功能的一种方案分析
2019/08/28 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
python实现外卖信息管理系统
2018/01/11 Python
Python实现简单石头剪刀布游戏
2021/01/20 Python
python儿童学游戏编程知识点总结
2019/06/03 Python
pyinstaller打包opencv和numpy程序运行错误解决
2019/08/16 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
解决python-docx打包之后找不到default.docx的问题
2020/02/13 Python
在脚本中单独使用django的ORM模型详解
2020/04/01 Python
python爬虫---requests库的用法详解
2020/09/28 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
使用python实现学生信息管理系统
2021/02/25 Python
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
办公室主任主任岗位责任制
2014/02/11 职场文书
实习协议书范本
2014/04/22 职场文书
遗愿清单观后感
2015/06/09 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers