Select2 ajax异步搜索数据

最新推荐文章于 2022-01-19 16:03:35 发布

原创最新推荐文章于 2022-01-19 16:03:35 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

php 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一种使用Select2插件结合AJAX动态加载数据的方法，通过PHP后端处理请求，实现了根据输入关键词实时更新下拉框选项的功能。详细解释了前端配置参数与后端逻辑，包括数据格式转换、缓存机制及自定义样式模板。

直接上代码

$(".aui-ajax-select").select2({
    ajax: {
        url: "/ajax_topics",
        method : "post",
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                id: "{{ $id }}", // search term
                title: params.term, // search term
                page: params.page,
                _token : '{{ csrf_token() }}'
            };
        },
        processResults: function (_data, params) {
            var data = _data.data;
            for (var i = 0; i < data.length; i++) {
                data[i].id = data[i].id;        //赋值id
                data[i].text = data[i].title;   //赋值标题
            }
            return {
                results: data
            };
        },
        cache: true
    },
    placeholder: "请输入名称搜索",
    escapeMarkup: function (markup) { return markup; }, // 让template的html显示效果，否则输出代码
    minimumInputLength: 2,
    templateResult: formatSubject, // 自定义下拉选项的样式模板
    templateSelection: formatSubjectSelection // 自定义选中选项的样式模板
});

function formatSubject(item) {
    if (item.loading) return item;
    var markup =  '<div>';
        markup += ' <p class="text-black">' + item.text + '</p>'; //显示文本名
        markup += '</div>';
    return markup;
}

//反回选中的值
function formatSubjectSelection(item) {
    return item.text || item.id;
}

php代码，具体业务自行查询。

/**
 * 搜索话题
 * @param Request $request
 * @return array
 * 话题,首次查询15条, 中山、瑞金抢头条，VR+医疗正在高速前进中？
 */
public function ajax_topics(Request $request) {
    if (!intval($request->id) && empty($request->title)) return response()->json(['info'=>'请输入用户名与密码！', 'code'=>201]);
    $topics_arr = Topic::SelectTopics(1, $request->id, $request->title);
    if (empty($topics_arr)) return response()->json(['info'=>'未查到数据！', 'code'=>201]);
    return response()->json(['info'=>'ok', 'data' => $topics_arr, 'code'=>200]);
}

完成。