jQuery下拉提示框自动完成插件flexselect « 邵珠庆の博客

邵珠庆の博客 生命只有一次,你可以用它来做些更多伟大的事情–Make the world a little better and easier

22四/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值。


邵珠庆推荐文章

博文加载中...

anyShare分享到:

喜欢这个文章吗?

考虑订阅我们的RSS Feed吧!

发布在 邵珠庆

评论 (0) 引用 (0)

还没有评论.


Leave a comment

(required)


*

还没有引用.