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监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
JQuery表单元素取值赋值方法总结
May 12 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
jQuery实现电梯导航模块
Dec 22 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
PHP正则的Unknown Modifier错误解决方法
2010/03/02 PHP
php中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
jQuery常用数据处理方法小结
2015/02/20 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
2016/10/10 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
python自动裁剪图像代码分享
2017/11/25 Python
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
如何利用Python识别图片中的文字
2020/05/31 Python
python中count函数知识点浅析
2020/12/17 Python
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
高中自我鉴定
2013/12/20 职场文书
麦当劳辞职信范文
2014/01/18 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
教师节宣传方案
2014/05/23 职场文书
车贷收入证明范本
2014/09/14 职场文书
安全生产月宣传标语
2014/10/06 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
结婚保证书(卖身契)
2015/02/26 职场文书
Nginx配置之禁止指定IP访问
2022/05/02 Servers