JS/jQuery 实现Combobox可输可选下拉框（select）

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

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

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

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

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

前提条件：引入Bootstrap 3和 jQuery 1.8库

1、下载插件

点击此处下载

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

 <link href="assets/magicsuggest/magicsuggest-min.css" rel="stylesheet">
 <script src="assets/magicsuggest/magicsuggest-min.js"></script>

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

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

 <div id="magicsuggest"></div>

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

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

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

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

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

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

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

• 它实现了动态配置实现多个功能

• 提供了多种操作可输可选下拉框的方法

• 提供了监听可输可选下拉框的动作事件

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

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