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插件制作 自增长输入框实现代码
Aug 17 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
jQuery插件jsonview展示json数据
May 26 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
jQuery实现网页拼图游戏
Apr 22 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
jquery实现下载图片功能
Jul 18 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 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
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
什么是短波收听SWL
2021/03/01 无线电
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
PHP实现通过正则表达式替换回调的内容标签
2015/06/15 PHP
基于jquery的商品展示放大镜
2010/08/07 Javascript
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
使用JSLint提高JS代码质量方法分享
2013/12/16 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
python自动化测试之setUp与tearDown实例
2014/09/28 Python
Python入门篇之编程习惯与特点
2014/10/17 Python
Python中DJANGO简单测试实例
2015/05/11 Python
Python中atexit模块的基本使用示例
2015/07/08 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
python 日期操作类代码
2018/05/05 Python
python3中的md5加密实例
2018/05/29 Python
python中类的属性和方法介绍
2018/11/27 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
澳大利亚最好的厨具店:Kitchen Warehouse
2018/03/13 全球购物
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
金智子午JAVA面试题
2015/09/04 面试题
生物科学系大学生的自我评价
2013/12/20 职场文书
2013年员工自我评价范文
2013/12/27 职场文书
2014年3.15团委活动总结
2014/03/16 职场文书
三分钟演讲稿范文
2014/04/24 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
2014年班级工作总结
2014/11/14 职场文书
小学生差生评语
2014/12/29 职场文书
Java详细解析==和equals的区别
2022/04/07 Java/Android