用Selectize.js輸入tag

sixleaves 發(fā)布于2019-08-26 12:08 / 2371人閱讀

摘要：本來(lái)處理輸入控件是很多的，比如，又比如，都各有各的好處，但也各有各的不足。今天選擇一款簡(jiǎn)單的插件。特點(diǎn)就是容易用，來(lái)看看怎么用。引入項(xiàng)目文件不是必須的，而且還沒(méi)有原生的那么漂亮，但勝在和風(fēng)格統(tǒng)一。

本來(lái)處理tags輸入控件是很多的，比如select2，又比如chosen，都各有各的好處，但也各有各的不足。今天選擇一款簡(jiǎn)單的插件：selectize.js Github: https://github.com/selectize/...。

Selectize.js特點(diǎn)就是容易用，來(lái)看看怎么用。

引入項(xiàng)目文件

selectize.bootstrap3.min.css不是必須的，而且還沒(méi)有原生的ui那么漂亮，但勝在和bootstrap風(fēng)格統(tǒng)一。

初始化更簡(jiǎn)單



$("#input-tags").selectize({
    delimiter: ",",
    persist: false,
    create: function(input) {
        return {
            value: input,
            text: input
        }
    }
});

這只能輸入簡(jiǎn)單的tag，復(fù)雜一點(diǎn)的就完全無(wú)濟(jì)于事，要想實(shí)現(xiàn)上圖那種復(fù)雜布局的tag，并且能夠加載遠(yuǎn)程服務(wù)器上的數(shù)據(jù)，還得花點(diǎn)時(shí)間配置一下選項(xiàng)。

$("#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(" ") : "沒(méi)有標(biāo)簽") + "" +
                "" +
                "";

        }
    },
    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);
            }
        });
    }
});