如何使用Selectize.js插件来处理tag输入控件

本篇文章分享给大家的内容是关于如何使用selectize.js插件来处理tag输入控件，内容很详细，接下来我们就来看看具体的内容，希望可以帮助到大家。

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

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

引入项目文件

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

ima.copilot

腾讯大混元模型推出的智能工作台产品，提供知识库管理、AI问答、智能写作等功能

下载

初始化更简单

$('#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);
            }
        });
    }
});

相关推荐：

对Element UI table组件的源码的详细分析

axios源码解析如何实现一个HTTP请求库