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操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
ExtJs中简单的登录界面制作方法
Aug 19 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
JQuery1.6 使用方法三
Nov 23 Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 Javascript
JS实现的找零张数最小问题示例
Nov 28 Javascript
详解Vue.js中.native修饰符
Apr 24 Javascript
vue项目中添加单元测试的方法
Jul 21 Javascript
微信公众平台 发送模板消息(Java接口开发)
Apr 17 Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 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
php中static静态变量的使用方法详解
2010/06/04 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
Python中__call__用法实例
2014/08/29 Python
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
Python的numpy库下的几个小函数的用法(小结)
2019/07/12 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
详解python算法常用技巧与内置库
2020/10/17 Python
python动态规划算法实例详解
2020/11/22 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
优秀员工年终发言演讲稿
2014/01/01 职场文书
我的求职计划书
2014/01/10 职场文书
办公室主任职责范本
2014/03/07 职场文书
市场拓展计划书
2014/05/03 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
党员对照检查材料思想汇报(党的群众路线)
2014/09/24 职场文书
小学德育工作总结2015
2015/05/12 职场文书