JS/jQuery 实现Combobox可输可选下拉框(select)

知道91 | 站长推荐 | 2014-09-04 | 阅读:29353

当我们在做html网页的时候,往往需要实现一些可输可选的select下拉框,这种下拉框往往比较复杂,如果自己单纯写这样一个下拉框是比较耗费时间的,特别对于敏捷开发项目来说是很不划算的,殊不知大神们已经为我们写好了这样的可输可选的select下拉框插件,小编极力推荐使用一款叫做MagicSuggest的插件。

MagicSuggest Combobox 可输入可选下拉框示例

之所以推荐这款插件原因有二:

一、这是一款为MIT License的开源免费jQuery Combobox插件。中国人习惯用免费的盗版或者破解版软件,这对软件作者是极其不尊重的,好在这款插件是完全免费的,你可以任意修改使用,并运用到商业中去。

二、这款Combobox 可输可选的jQuery插件功能强大,几乎能满足所有开发者的需求。

MagicSuggest Combobox可输可选下拉框jQuery插件使用方法

前提条件:引入Bootstrap 3jQuery 1.8

1、下载插件

点击此处下载

2、将下载的插件解压,引入库到你的代码中



如示例将magicsuggest-min.css和magicsuggest-min.js文件引入到你的代码中去

3、创建一个COM元素作为可输可选Combobox下拉框的容器

4、最后需要添加一段Javascript执行代码

$(function() {
    $('#magicsuggest').magicSuggest({
        [...] // configuration options
    });
});

其中的Configuration options可以实现多种配置功能,比如可以这样写

$('#ms-allowFreeEntries').magicSuggest({
  allowFreeEntries: false,
  data: ['Paris', 'New York', 'Gotham']
});

关于MagicSuggest的更多配置可以参考MagicSuggest 官网

可以实现通过Ajax动态加载可输可选下拉框的选项,可以在下拉框中输入一个新值动态添加一个数据选项,同样可以实现可输可选下拉框多选。

这款可输可选下拉框jQuery插件的强大之处就在于:

  1. 它实现了动态配置实现多个功能
  2. 提供了多种操作可输可选下拉框的方法
  3. 提供了监听可输可选下拉框的动作事件

MagicSuggest 是一款强大的可输可选Combobox下拉框插件,感谢作者的免费提供。

有任何问题,可以给我留言,我会在第一时间为大家解答,谢谢!