bootstrap-select2 ajax将模糊匹配修改为实时搜索

近几天要写一个用户可以实时搜索数据的下拉框，就搜到了bootstrap的一个插件，我具体实现的功能是：下拉框显示的内容根据用户的搜索词实时(ajax)发生变化

首先官方文档大家可以参考一下，里面有很多基础的东西，具体大家可根据实际情况结合使用
https://select2.org/

前段代码：

#这里引用官方文档提供的js ,css

#这里设置长度大有用处
var mylength=0

// 下拉搜索框
$("#sel_menu3").select2({
    data: [],        //因为实时搜索，每一次就要把上一次搜索的数据清空掉
    placeholder:'请选择',//默认文字提示
    {#tags: true,//允许手动添加#}

    allowClear: true,//允许清空
    //这里是ajax获取下拉框的内容
    ajax: {
        url: '/Strategycenter/choiceBrandTest',
        type:'post',
        dataType: 'json',
        data:function (params) {            //给后端传参数，这里的格式是固定的一定要这样写
          var query = {
              search: params.term,
            mylength:mylength,
            cateIds: $('#category').val(),
            cookies: $('.new_databank_cookie').val()
          }
          return query;
        },
        processResults: function (data) {    //这里是接收后段返回的数据
            console.log('--------c')
            mylength=data.mylength
            {#console.log($(this))#}
            console.log(data.results);
             return {
                results: data.results,

              };
         }
        }

})

后段代码：

def choiceBrandTest(request):
    cookies = request.POST.get('cookies')
    cateId = request.POST.getlist('cateIds[]')
    search=request.POST.get('search')
    mylength=request.POST.get('mylength')


    print(mylength)


    try:

        a=''
        for item in cateId:
            a += ''.join(item + ',')

        cateId=a[0:-1]
        first_url = 'https://strategy.tmall.com/api/scapi'
        params= {'path': '/api/v1/muticate/brand/list','cateIds': cateId} if search == '' else {'path': '/api/v1/muticate/brand/list','cateIds': cateId,'name':search}
        
        res = json.loads(requests_method(cookies, 'get', first_url, params))
        print(res)
        data = []
	
		#这里是重点，如果给前段传送option显示的数据，就要按照固定的格式，尤其是data,，包括第一次的index一点要是从1开始
        index = 1 if int(mylength) == 0 else int(mylength)+1
        for item in res['data']:
            data.append({
                'id': index,
                'name': item['id'],
                'text': item['name'],

            })
            index += 1
        return JsonResponse({'results': data})
    except Exception as e:
        index = 1

        data=[{
            'id': index,
            'itemId': '',
            'text': '没有此品牌',

        }]
        index += 1
        return JsonResponse({'results': data,'mylength':index})

以上就是我实现ajax实时搜索的代码，我详细说一下我遇到的几个问题
问题一： 数据通过ajax回显之后，用户点击下拉框中的数据，但是输入框出现的数据并不是用户点击的数据，
这个问题是因为实时搜索的过程，虽然前后端交互是正常的，但是select2自带的缓存机制，没有吧上次的数据给清空掉，实际的id一直在追加，所以说，前段一定要在ajax调下一个接口前把上一个缓存结果清空–data: [],

问题二： 当我点击第一个标签之后，我再次搜索，第一个的位置上的数据无法点击
大家可以注意到图2，这个selectId是一直在追加的，这个就是因为我们后段传过来的数据要给每个标签加索引，因为我们select2 一直在实时搜索，大家通过页面看到id在追加，然而我们的后段代码依然每次让index从1开始，所以说，会导致页面认为index=1的数据已经被选择，即使是新的搜索数据，依然无法选择，解决的办法就是，大家注意到前端，我让大家设置了一个mylength=0 ,这个就是重点了，既然前段页面在追加，那么我们首次搜索从1开始，接下来的搜索下标就从上次索引结束的数字加1开始，不就刚好和追加的index保持一致了。完美解决