简单易用 jQuery自动完成插件 自动完成器

  • 源码大小:142.15KB
  • 所需积分:1积分
  • 源码编号:19JP-3365
  • 浏览次数:475次
  • 最后更新:2023年06月05日
  • 所属栏目:表单
我要下载
加入收藏
本站默认解压密码:19jp.com 或 19jp_com

简介

Autocomplete是一个简单、简单、可自定义、支持缓存的jQuery插件,允许您从包含建议的下拉列表中选择项目。

基本用法:

1.在页面的标题部分包含必需的jquery.autocompleter.css。

<link href="jquery.autocompleter.css" rel="stylesheet">

2.在页面底部包含jQuery javascript库和jQuery自动补全插件。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="jquery.autocompleter.js"></script>

3.在页面上创建一个文本字段。

<input type="text" name="nope" id="nope" placeholder="Pick a color" maxlength="40" />

4.在javascript中创建JSON格式的数据。

var colors =
[
    {
        "hex": "#EFDECD",
        "label": "Almond",
        "rgb": "(239, 222, 205)"
    },
    {
        "hex": "#CD9575",
        "label": "Antique Brass",
        "rgb": "(205, 149, 117)"
    },
    ...
];

4.在文本文件上调用插件。

$(function () {
  $('#nope').autocompleter({

    // marker for autocomplete matches
    highlightMatches: true,

    // object to local or url to remote search
    source: colors,

    // show hint
    hint: true,

    // abort source if empty field
    empty: false,

    // max results
    limit: 5,

  });
});

5.所有可能的选项和回调。

  • 来源:null:服务器或本地对象的URL
  • 空:真:如果值为空,则启动
  • asLocal:错误:将远程响应分析为本地源
  • 最小长度:0:自动补码器的最小长度
  • 限制:10:计数要显示的结果
  • 自定义类别:[]:具有自动补全元素的自定义类的数组
  • 缓存:true:将xhr数据保存到localStorage以避免重复请求
  • 缓存过期时间:86400:localStorage数据生存期
  • focusOpen: true:当输入获得焦点时启动自动补全器
  • 提示:false:使用第一个匹配标签为输入添加提示,应建立适当的样式
  • selectFirst:错误:如果设置为true,将自动选择自动完成列表中的第一个元素,如果启用了changeWhenSelect,则忽略
  • 更改选择时:true:在自动完成列表中使用箭头键导航时更改输入值
  • highlight匹配:false:此选项为自动完成结果中的匹配项定义<strong>标记换行
  • ignoredKeyCode: []:具有可忽略键代码的数组
  • customLabel: false:源中将实现为标签的属性名称
  • customValue: false:源中将实现为值的属性名称
  • 模板:false:列表项的自定义模板
  • 偏移:错误:源响应偏移量,例如:response.items.posts
  • 联合收割机:$.noop:返回用于扩展ajax数据的对象。如果您想传递任何额外的服务器选项,这很有用
  • 回调:$.noop:选择值回调函数。参数:值,索引
  • 延迟:0:延迟请求几毫秒

6.API方法。

// updates options
$('#input').autocompleter('option', {
  // options
});

// opens the suggestion list
$('#input').autocompleter('open');

// closes the suggestion list
$('#input').autocompleter('close');

// destroys the plugin
$('#input').autocompleter('destroy');

// clears all cache
$.autocompleter('clearCache');

更新日志:

2022-10-09

  • v0.7.0:错误修复

2022-04-06

  • 版本0.6.0

2022-04-05

  • 更新的依赖项

2020-01-05

  • v0.4.0:JS更新

2018-03-09

  • v0.3.0:合并属性已更改

2015-01-22

  • v0.1.9.3.添加cacheExpires选项。
  • 将cacheExpires添加到allowOptions。

2015-01-21

  • 版本0.1.9.2

2014-12-01

  • 版本0.1.8

2014-11-26

  • 修复了错误。

2014-11-23

  • 添加延迟功能

2014-09-13

  • 添加选项minLength

2014-06-17

  • 修复本地源的自定义标签

2014-06-11

  • 版本0.1.4

2014-06-08

  • 固定代码样式
  • 添加local.json处理程序
  • 添加为本地参数

2014-05-24

  • 添加偏移选项

2014-05-21

  • 添加打开、关闭选项

2014-05-19

  • 添加IE8支持

2014-05-18

  • 已修复:按Enter键时返回本机表单提交

2014-05-17

  • 添加自定义模板选项

预览截图