用Selectize.js输入tag

sixleaves 发布于2019-08-26 12:08 / 2399人阅读

摘要：本来处理输入控件是很多的，比如，又比如，都各有各的好处，但也各有各的不足。今天选择一款简单的插件。特点就是容易用，来看看怎么用。引入项目文件不是必须的，而且还没有原生的那么漂亮，但胜在和风格统一。

本来处理tags输入控件是很多的，比如select2，又比如chosen，都各有各的好处，但也各有各的不足。今天选择一款简单的插件：selectize.js Github: https://github.com/selectize/...。

Selectize.js特点就是容易用，来看看怎么用。

引入项目文件

</>复制代码

selectize.bootstrap3.min.css不是必须的，而且还没有原生的ui那么漂亮，但胜在和bootstrap风格统一。

初始化更简单

</>复制代码 
$("#input-tags").selectize({
    delimiter: ",",
    persist: false,
    create: function(input) {
        return {
            value: input,
            text: input
        }
    }
});

这只能输入简单的tag，复杂一点的就完全无济于事，要想实现上图那种复杂布局的tag，并且能够加载远程服务器上的数据，还得花点时间配置一下选项。

</>复制代码 
$("#games").selectize({
    options: [],
    create: false,
        valueField:  "id",
        labelField:  "title",
        searchField: "title",
        maxItems: 5,
        render: {
        option: function(item, escape) {
            var tags = [];
            for (var i = 0, n = item.tags.length; i < n; i++) {
                tags.push("" + escape(item.tags[i]) + "");
            }
            return "" +
                "
" +
                "" +
                "" + escape(item.title) + "
" +
                "" + escape(item.category) + "" +
                "" + (tags.length ? tags.join(" ") : "没有标签") + "
" +
                "" +
                "";
        }
    },
    load: function(query, callback) {
        if (!query.length) return callback();
        $.ajax({
            url: "{{ url("games/query") }}",
            type: "GET",
            dataType: "json",
            data: {
                term: query,
                limit: 4
            },
            error: function() {
                callback();
            },
            success: function(res) {
                callback(res.results);
            }
        });
    }
});

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108088.html

67 个拯救前端开发者的工具、库和资源

摘要：库一个用来在中创建炫酷的浮动粒子的库一个用来在中创建物体和空间的库快速实现全屏滚动特性打字机效果滚动到某个元素位置时触发一个功能语法高亮使用创建漂亮的图表能够明显加速网站加载时间，鼠标时预加载资源另一个图表库一个基于动画和平移的雪碧图库实现 Javascript 库 Particles.js 一个用来在 web 中创建炫酷的浮动粒子的库 Three.js 一个用来在 web 中创...

XiNGRZ 2019-08-22 16:00 评论0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

netmou 2019-08-23 12:28 评论0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

Hydrogen 2019-08-02 11:46 评论0 收藏0
javascript功能插件大集合，写前端的亲们记得收藏

摘要：一个专注于浏览器端和兼容的包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。完全插件化的工具，能在中识别和记录模式。健壮的优雅且功能丰富的模板引擎。完整的经过充分测试和记录数据结构的库。【导读】：GitHub 上有一个 Awesome – XXX 系列的资源整理。awesome-javascript 是 sorrycc 发起维护的 JS 资源列表...

cfanr 2019-08-20 10:34 评论0 收藏0
JavaScript 资源大全中文版

摘要：官网全新的静态包管理器。官网一个整合和官网的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。官网小巧的兼容的所见即所得的富文本编辑器。官网富文本编辑器。官网由制作，适用于每天写作的富文本编辑器。 1. 包管理器管理着 javascript 库，并提供读取和打包它们的工具。 npm：npm 是 javascript 的包管理器。官网 cnpm：cnpm 是由于国...

jzman 2019-08-23 17:18 评论0 收藏0