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 相关文章推荐
表单元素事件 (Form Element Events)
Jul 17 Javascript
js跨域和ajax 跨域问题的实现思路
Sep 05 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
Sep 03 Javascript
基于jQuery的获得各种控件Value的方法
Nov 19 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
js解析与序列化json数据(二)序列化探讨
Feb 01 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
Shell脚本实现Linux系统和进程资源监控
Mar 05 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
JS实现数组删除指定元素功能示例
Jun 05 Javascript
微信小程序实现抖音播放效果的实例代码
Apr 11 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
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
php 实现Hash表功能实例详解
2016/11/29 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
phpwind放自动注册方法
2006/12/02 Javascript
让FireFox支持innerText的实现代码
2009/12/01 Javascript
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
整理AngularJS中的一些常用指令
2015/06/16 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
2016/07/01 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
2019/09/11 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
用实例分析Python中method的参数传递过程
2015/04/02 Python
详解Python中的array数组模块相关使用
2016/07/05 Python
python中format()函数的简单使用教程
2018/03/14 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
将python包发布到PyPI和制作whl文件方式
2019/12/25 Python
Python实现结构体代码实例
2020/02/10 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
党员先进事迹材料
2014/12/19 职场文书
先进工作者申报材料
2014/12/23 职场文书
少年的你:世界上没有如果,要在第一次就勇敢的反抗
2019/11/20 职场文书
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫