可过滤和启用Ajax jQuery Select增强插件 TinySelect

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

简介

TinySelect是一个小而强大的jQuery插件,通过AJAX请求支持实时过滤和远程数据源,用于增强默认选择框。

如何使用它:

1.将jQuery JavaScript库与锡选.csstinyselect.js进入html页面。

  1. <script src="/path/to/cdn/jquery.min.js"></script>
  2. <script src="js/tinyselect.js"></script>
  3. <link rel="stylesheet" href="css/tinyselect.css">

2.使用静态数据创建一个基本的可筛选选择框。

  1. <select id="select1">
  2. <option value="0">option a</option>
  3. <option value="1">option b</option>
  4. <option value="2">option c</option>
  5. <option value="3">option d</option>
  6. <option value="4">option e</option>
  7. <option value="5">option f</option>
  8. <option value="6">option g</option>
  9. <option value="7">option h</option>
  10. </select>
  1. $("#select1").tinyselect();

3.创建一个动态可筛选的选择框,从中加载数据文件.json.

  1. <select id="select2">
  2. </select>
  1. $("#select2").tinyselect({
  2. dataUrl: "file.json"
  3. });

4.禁用带电过滤器。

  1. $("#select1").tinyselect({
  2. showSearch: false
  3. });

5.自定义AJAX加载状态的文本。

  1. $("#select1").tinyselect({
  2. txtLoading: "Loading...",
  3. txtAjaxFailure: "Error...",
  4. });

6.自定义函数,用于解析来自ajax请求的数据。

  1. $("#select1").tinyselect({
  2. dataParser: function(){}
  3. });

7.所有默认选项。

  1. // Show search box
  2. showSearch: true,
  3.  
  4. // case sensitive?
  5. searchCaseSensitive: true,
  6.  
  7. // Text to show while loading ajax request
  8. txtLoading: "Loading...",
  9.  
  10. // Text to show, if ajax loading fails
  11. txtAjaxFailure: "Error...",
  12.  
  13. // URL where to load content.
  14. // If value is not set, plugin reads content from select element
  15. dataUrl: null,
  16.  
  17. // Custom function to parse data from ajax request
  18. dataParser: null

更新日志:

v2.0.0版本(2023-01-05)

  • 重建dist-js

v2.0.0版本(2022-12-07)

  • 更新的包和弃用的jquery 1.x

v1.0.6 (2018-07-16)

  • 更新的开发包版本
  • 使用较新的js-uglify重新编译(这反过来又将文件大小减少了7个字节。是的)
  • 替换源中的选项卡

2016-07-09

  • 现在可以设置搜索区分大小写

预览截图