Select2 插件的使用

摘要:select2 插件的使用,select2 插件就是为了应对那种随着输入框中输入内容,然后有下拉出来相关比配内容可以选择的需求。

Select2 插件

select2 插件就是那种随着输入框中输入内容,然后有下拉出来相关比配内容可以选择。官网网址:https://select2.org/ 有使用配置和使用 demo。其实这个插件原理很简单,就算我们不使用此插件也可以实现输入下拉匹配的功能,比如输入框触发聚焦、点击、键盘等事件后,再去 ajax 请求后台,然后把搜索匹配到的内容在前台展示下就可以了。

引入一个 js 和 css 文件。

<link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>

我是后台使用 laravel 框架,然后前端的代码如下。

<select class="js-data-example-ajax" name="state"></select>

<script type="text/javascript">
    $('.js-data-example-ajax').select2({
        width: '100%',
        placeholder: "请输入经纪公司名称",
        cache: true,
        minimumInputLength: 1,
        ajax:{
            headers: {
                'X-CSRF-TOKEN': $("input[name='_token']").val()
            },
            url: '/admin/actor_bind_agency',
            type: 'get',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                var query = {
                    agency_text: params.term,
                }
                return query;
            },
            processResults: function (data) {
                return {
                    results: data
                };
            },
        }
    });
</script>

但是需要注意的是后台 ajax 返回的结果一定要是这种数据结构。

[
    {
        "id": 9,
        "text": "华谊兄弟传媒股份有限公司"
    },
    {
        "id": 12,
        "text": "浙江华策影视股份有限公司"
    },
    {
        "id": 13,
        "text": "乐华娱乐"
    }
]

最后附上一个官网文档 demo。

$(".js-example-data-ajax").select2({
    ajax: {
        url: "https://api.github.com/search/repositories",
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                q: params.term, // search term
                page: params.page
            };
        },
        processResults: function (data, params) {
            // parse the results into the format expected by Select2
            // since we are using custom formatting functions we do not need to
            // alter the remote JSON data, except to indicate that infinite
            // scrolling can be used
            params.page = params.page || 1;

            return {
                results: data.items,
                pagination: {
                    more: (params.page * 30) < data.total_count
                }
            };
        },
        cache: true
    },
    placeholder: 'Search for a repository',
    minimumInputLength: 1,
    templateResult: formatRepo,
    templateSelection: formatRepoSelection
});

function formatRepo (repo) {
    if (repo.loading) {
        return repo.text;
    }

    var $container = $(
        "<div class='select2-result-repository clearfix'>" +
        "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
        "<div class='select2-result-repository__meta'>" +
        "<div class='select2-result-repository__title'></div>" +
        "<div class='select2-result-repository__description'></div>" +
        "<div class='select2-result-repository__statistics'>" +
        "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> </div>" +
        "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> </div>" +
        "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> </div>" +
        "</div>" +
        "</div>" +
        "</div>"
    );

    $container.find(".select2-result-repository__title").text(repo.full_name);
    $container.find(".select2-result-repository__description").text(repo.description);
    $container.find(".select2-result-repository__forks").append(repo.forks_count + " Forks");
    $container.find(".select2-result-repository__stargazers").append(repo.stargazers_count + " Stars");
    $container.find(".select2-result-repository__watchers").append(repo.watchers_count + " Watchers");

    return $container;
}

function formatRepoSelection (repo) {
    return repo.full_name || repo.text;
}
结束语:感谢您对本网站文章的浏览,欢迎您的分享和转载,但转载请说明文章出处。
Top