竹磬网-邵珠庆の日记 生命只有一次，你可以用它来做些更多伟大的事情–Make the world a little better and easier


224月/150

jQuery下拉提示框自动完成插件flexselect

发布在 邵珠庆

Flexselect是一个jQuery下拉自动完成填写的插件，它是把选择下拉框变成了一个具有动态匹配与增强查找控制的下拉列表，可以让用户输入部分字符时显示配置的记录，达到自动完成的目的。

如何使用

1、引入核心文件，因为本插件用到了LiquidMetal，所以必须引入，引入的顺序不能乱

1
2
3
4
<link rel="stylesheet" href="flexselect.css" type="text/css" media="screen" />
<script src="jquery.min.js" type="text/javascript">script>
<script src="liquidmetal.js" type="text/javascript">script>
<script src="jquery.flexselect.js" type="text/javascript">script>

2、写入html代码

1
2
3
4
5
6
<select class="flexselect">
  <option value="1">George Washingtonoption>
  <option value="2">John Adamsoption>
  <option value="3">Thomas Jeffersonoption>
  ...
select>

3、写入JS初始化插件

1
2
3
jQuery(document).ready(function() {
  $("select.flexselect").flexselect();
});

4、自定义选项

1
<select name="email" class="flexselect"> ... select>
1
2
3
4
$("select.flexselect").flexselect({
  allowMismatch: true,
  inputNameTransform:  function(name) { return "new_" + name; }
});

输入文本框不仅仅只允许替换原来定义在下拉列表存在的选项，它还可以通过字段属性配置来分配，如new_email。当然你也可以自定义 inputNameTransform函数，传送的参数name为下拉列表select的name值。

标签: , , , , , 没有评论
   

支持博主

了解慈善捐款计划

关于邵珠庆博客

文章标签

API GA Git Google Analytics HTML5 jquery JS Linux MySQL nginx PHP SaaS web 互联网 代码 使用 分析 创业 原理 命令 好东西 如何 工具 常用 开发 总结 技巧 技术 插件 数据 文件 方法 时间 架构 框架 汇总 百度 管理 系统 网站 网站分析 设计 详解 问题 阿里云

记事邵珠庆博客

1、Web前端网址导航
2、邵珠庆极客筛站
3、识别移动设备访问代码


最近文章

最近评论

博客日历

2025年5月
一 二 三 四 五 六 日
« 8月    
 1234
567891011
12131415161718
19202122232425
262728293031  

目录分类

文章归档

博客功能