近几天要写一个用户可以实时搜索数据的下拉框,就搜到了bootstrap的一个插件,我具体实现的功能是:下拉框显示的内容根据用户的搜索词实时(ajax)发生变化
首先官方文档大家可以参考一下,里面有很多基础的东西,具体大家可根据实际情况结合使用
前段代码:
#这里引用官方文档提供的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保持一致了。完美解决