jQuery Autocomplete简介_动力节点Java学院整理


Posted in jQuery onJuly 17, 2017

jQuery UI Autocomplete是jQuery UI的自动完成组件,是我用过的最强大、最灵活的Autocomplete,它支持本地的Array/JSON数组、通过ajax请求的Array/JSON数组、JSONP、以及Function(最灵活)等方式来获取数据。

支持的数据源

jQuery UI Autocomplete主要支持字符串Array、JSON两种数据格式。

普通的Array格式没有什么特殊的,如下:

["bjpowernode","动力节点","李四"]

对于JSON格式的Array,则要求有:label、value属性,如下:

[{label: "动力节点", value: "bjpowernode"}, {label: "李四", value: "李四"}]

其中label属性用于显示在autocomplete弹出菜单,而value属性则是选中后给文本框赋的值。

如果没有指定其中一个属性则用另一个属性替代(即value和label值一样),如下:

[{label: "bjpowernode"}, {label: "李四"}]
[{value: "bjpowernode"}, {value: "李四"}]

如果label和value都没有指定,则无法用于autocomplete的提示。

另外需要注意,对于从服务器端输出的JSON的key必须用双引号,如下:

[{"label": "动力节点", "value": "bjpowernode"}, {"label": "李四", "value": "李四"}]

否则可能会出现parsererror错误。

主要的参数

jQuery UI Autocomplete常用的参数有:

1.Source:用于指定数据来源,类型为String、Array、Function

  1. String:用于ajax请求的服务器端地址,返回Array/JSON格式
  2. Array:即字符串数组 或 JSON数组
  3. Function(request, response):通过request.term获得输入的值,response([Array])来呈现数据;(JSONP是这种方式)

2.minLength:当输入框内字符串长度达到minLength时,激活Autocomplete

3.autoFocus:当Autocomplete选择菜单弹出时,自动选中第一个

4.delay:即延迟多少毫秒激活Autocomplete

其他不常用的就不罗列了。

使用方法

假如页面上有以下输入框:

<input type="text" id="autocomp" />

AJAX请求
通过指定source为服务器端的地址来实现,如下:

$("#autocomp").autocomplete({
  source: "remote.ashx",
  minLength: 2
});

然后在服务器端接收,并输出相应结果,注意默认传递的参数名称为term:

public void ProcessRequest(HttpContext context) {   
// 查询的参数名称默认为term   
string query = context.Request.QueryString["term"];   
context.Response.ContentType = "text/javascript";   
//输出字符串数组 或者 JSON 数组   
context.Response.Write("[{\"label\":\"动力节点\",\"value\":\"bjpowernode\"},{\"label\":\"李四\",\"value\":\"李四\"}]"); }

本地Array/JSON数组

// 本地字符串数组
var availableTags = [
  "C#",
  "C++",
  "Java",
  "JavaScript",
  "ASP",
  "ASP.NET",
  "JSP",
  "PHP",
  "Python",
  "Ruby"
];
$("#local1").autocomplete({
  source: availableTags
});
// 本地json数组
var availableTagsJSON = [
  { label: "C# Language", value: "C#" },
  { label: "C++ Language", value: "C++" },
  { label: "Java Language", value: "Java" },
  { label: "JavaScript Language", value: "JavaScript" },
  { label: "ASP.NET", value: "ASP.NET" },
  { label: "JSP", value: "JSP" },
  { label: "PHP", value: "PHP" },
  { label: "Python", value: "Python" },
  { label: "Ruby", value: "Ruby" }
];
$("#local2").autocomplete({
  source: availableTagsJSON
});

Callback Function方式

通过指定source为自定义函数来实现自定义数据的获取,函数主要有2个参数(request,response),分别用于获取输入的值、呈现结果

本地Array方式获取数据(模仿新浪微博的登录)

var hosts = ["gmail.com", "live.com", "hotmail.com", "yahoo.com", "bjpowernode.com", "火星.com", "李四.com"];
$("#email1").autocomplete({
  autoFocus: true,
  source: function(request, response) {
    var term = request.term, //request.term为输入的字符串
      ix = term.indexOf("@"),
      name = term, // 用户名
      host = "", // 域名
      result = []; // 结果
 
    result.push(term);
    // result.push({ label: term, value: term }); // json格式
    if (ix > -1) {
      name = term.slice(0, ix);
      host = term.slice(ix + 1);
    }
    if (name) {
      var findedHosts = (host ? $.grep(hosts, function(value) {
        return value.indexOf(host) > -1;
      }) : hosts),
      findedResults = $.map(findedHosts, function(value) {
        return name + "@" + value; //返回字符串格式
        // return { label: name + " @ " + value, value: name + "@" + value }; // json格式
      });
      result = result.concat($.makeArray(findedResults));
    }
    response(result);//呈现结果
  }
});

JSONP方式获取数据

直接从官方DEMO拿来的,通过发送ajax请求到远程服务器,然后对返回结果进行处理,最后通过response来呈现:

$("#jsonp").autocomplete({
  source: function(request, response) {
    $.ajax({
      url: "http://ws.geonames.org/searchJSON",
      dataType: "jsonp",
      data: {
        featureClass: "P",
        style: "full",
        maxRows: 12,
        name_startsWith: request.term
      },
      success: function(data) {
        response($.map(data.geonames, function(item) {
          return {
            label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
            value: item.name
          }
        }));
      }
    });
  },
  minLength: 2
});

主要的事件

jQuery UI Autocomplete有一些事件,可用于在一些阶段进行额外的控制:

1.create(event, ui):Autocomplete创建时,可以在此事件中,对外观进行一些控制

2.search(event, ui): 在开始请求之前,可以在此事件中返回false来取消请求

3.open(event, ui):Autocomplete的结果列表弹出时

4.focus(event, ui):Autocomplete的结果列表任意一项获得焦点时,ui.item为获得焦点的项

5.select(event, ui):Autocomplete的结果列表任意一项选中时,ui.item为选中的项

6.close(event, ui):Autocomplete的结果列表关闭时

7.change(event, ui):当值改变时,ui.item为选中的项

这些事件的ui参数的item属性(如果有的话)默认有label和value属性,不管在source中设置的数据是Array还是JSON数组,如下3种:

["bjpowernode","动力节点","李四"]
[{label: "动力节点", value: "bjpowernode"}, {label: "李四", value: "李四"}]
[{label: "动力节点", value: "bjpowernode", id: "1"}, {label: "李四", value: "李四", id: "2"}]

假如是第三种的话,还可以得到ui.item.id的值。

这些事件可以通过2种方式来绑定,如下:

// 在参数中
$("#autocomp").autocomplete({
  source: availableTags
  , select: function(e, ui) {
   alert(ui.item.value) 
  }
});
 
// 通过bind来绑定
$("#autocomp").bind("autocompleteselect", function(e, ui) {
  alert(ui.item.value);
});

通过bind来绑定的方式使用的事件名称为"autocomplete"+事件名称,如"select"就是"autocompleteselect"。

多个值的Autocomplete

一般情况下,输入框的autocomplete仅需要一个值就可以(如:javascript);假如需要多个值(如:javascript,c#,asp.net),则需要绑定一些事件来进行额外处理:

1.在focus事件中返回false,避免输入框的值被autocomplete的单个值取代

2.在select事件中组合多个值

3.在元素的keydown事件做一些处理,理由同1

4.使用callback function方式的source,来获取最后输入的值,并呈现结果

还是直接拿官方DEMO的代码:

// 按逗号分隔多个值
function split(val) {
  return val.split(/,\s*/);
}
// 提取输入的最后一个值
function extractLast(term) {
  return split(term).pop();
}
// 按Tab键时,取消为输入框设置value
function keyDown(event) {
  if (event.keyCode === $.ui.keyCode.TAB &&
      $(this).data("autocomplete").menu.active) {
    event.preventDefault();
  }
}
var options = {
  // 获得焦点
  focus: function() {
    // prevent value inserted on focus
    return false;
  },
  // 从autocomplete弹出菜单选择一个值时,加到输入框最后,并以逗号分隔
  select: function(event, ui) {
    var terms = split(this.value);
    // remove the current input
    terms.pop();
    // add the selected item
    terms.push(ui.item.value);
    // add placeholder to get the comma-and-space at the end
    terms.push("");
    this.value = terms.join(", ");
    return false;
  }
};
// 多个值,本地数组
$("#local3").bind("keydown", keyDown)
  .autocomplete($.extend(options, {
    minLength: 2,
    source: function(request, response) {
      // delegate back to autocomplete, but extract the last term
      response($.ui.autocomplete.filter(
        availableTags, extractLast(request.term)));
    }
  }));
// 多个值,ajax返回json
$("#ajax3").bind("keydown", keyDown)
  .autocomplete($.extend(options, {
    minLength: 2,
    source: function(request, response) {
      $.getJSON("remoteJSON.ashx", {
        term: extractLast(request.term)
      }, response);
    }
  }));

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery仿京东商品放大浏览页面
Jun 06 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 #jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 #jQuery
jQuery列表检索功能实现代码
Jul 17 #jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 #jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 #jQuery
JQuery EasyUI的一些常用组件
Jul 12 #jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 #jQuery
You might like
一个程序下载的管理程序(二)
2006/10/09 PHP
php cookie 作用范围?不要在当前页面使用你的cookie
2009/03/24 PHP
基于PHP CURL用法的深入分析
2013/06/09 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
深入分析PHP设计模式
2020/06/15 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
Angular实现form自动布局
2016/01/28 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
Python GAE、Django导出Excel的方法
2008/11/24 Python
Python的time模块中的常用方法整理
2015/06/18 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
利用python和百度地图API实现数据地图标注的方法
2019/05/13 Python
python离线安装外部依赖包的实现
2020/02/13 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
python 连续不等式语法糖实例
2020/04/15 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
数据库测试通常都包括哪些方面
2015/11/30 面试题
大学优秀班主任事迹材料
2014/05/02 职场文书
党员个人整改措施
2014/10/24 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
小学语文教师研修日志
2015/11/13 职场文书
高二语文教学反思
2016/02/16 职场文书
Vue实现动态查询规则生成组件
2021/05/27 Vue.js