Select2 实现模糊搜索 （远程实时加载）

select2 官方网站

1 前端部分
可选择去 https://github.com/select2/select2 ，下载select2对应的js和css，以及相关样式资源，同时也可根据开发要求，设置提示language。

涉及外部js和css

<link rel='stylesheet' href='../select2/select2.css' type='text/css' />
<link rel='stylesheet' href='../select2/select2-bootstrap-5-theme.min.css' type='text/css' />
<script type="text/javascript" th:src="@{select2/select2.js}"></script>
<script type="text/javascript" th:src="@{select2/i18n/zh-CN.js}"></script>
<script type="text/javascript" th:src="@{jquery/jquery-2.2.4.js}"></script>

html

<div class='search-device'>
<select id="js-data-example-ajax" style="width:100%"></select></div>

js

$(document).ready(function() {
$('#js-data-example-ajax').select2({
	allowClear: true,
	language: "zh-CN",
	placeholder: '请输入名称',
	minimumInputLength: 2,
	theme: "bootstrap-5",
	containerCssClass: "select2--large", 
	selectionCssClass: "select2--large", 
	dropdownCssClass: "select2--large",
	// tags: true,
	ajax: {
		url: '..../search',
		dataType: 'json',
		data: function(params) {
			return {
				text: params.term //参数
			};
		},
		processResults: function(data) {
			var results = [];
			$.each(data, function(index, item) {
				results.push({
					id: item.id,
					text: item.text,
				});
			});
			return {
				results: results
			};
		},
		cache: true,
		delay: 250,
	},
	escapeMarkup: function(markup) {
		return markup;
	},
	templateResult: formatRepoProvince,
	templateSelection: formatRepoProvince,
});

function formatRepoProvince(repo) {
	if (repo.loading) return repo.text;
	var markup = "<div>"+repo.text+"</div>";
	return markup;
}

});

2 后端部分
devicesService.getSearchData(text)该方法是返回与text(搜索对象)相关的数据，根据Select2要求的格式返回对应格式的JSON数据。
格式如下：

{
  "results": [
    {
      "id": 1,
      "text": "Option 1"
    },
    {
      "id": 2,
      "text": "Option 2"
    }
  ],
  "pagination": {
    "more": true
  }
}

    @RequestMapping("/search")
    @ResponseBody
    public String getSearchData(String text) {
        return devicesService.getSearchData(text);
    }

3 遇到的问题
查询对应的所有数据id 必须唯一，并不是每次返回的JSON数据可行即可，即历史和当前数据均需要不存在id冲突，否则会出现点击搜索下拉提示记录时，该记录不会被选中显示。