1.下载select2的插件文件（js（pinyin.js,select2.js）和css(select2.css)）
2.引入
3.使用
1.简单使用
1.在要用到select2的select标签中载入样式：class="js-example-basic-single"
2.在js中载入select2：
```
$(document).ready(function () {
$('.js-example-basic-single').select2();
});
```
2.select2+ajax
1.js代码：
```
$(document).ready(function () {
// 重新定义select2
$('select[name="ORDER_NAME"]').select2({
ajax: {
url:'/oper/ajax_select_dict_oeders/',
delay:250,
data:function (params) {
return {
username: params.term,// 搜索框内输入的内容，传递到Java后端的parameter为username
};
},
processResults:function (data, params) {
return {
results: data.data,// 后台返回的数据集
};
},
cache:false
},
escapeMarkup:function (markup) {
return markup;
},// let our custom formatter work
minimumInputLength:1,// 最少输入一个字符才开始检索
templateResult:formatRepo,
templateSelection:formatRepoSelection
// 正在检索
});
});
function formatRepo(repo) {
if (repo.loading) {
return repo.text;
}
var markup = repo.PRICE_ITEM_LOCAL_NAME;
return markup;
}
function formatRepoSelection(repo) {
return repo.PRICE_ITEM_LOCAL_NAME || repo.text;
}
2.后台代码：
```
def ajax_select_dict_oeders(request):
local_name = request.GET.get('username','')
dict_orders = DictOrders.objects.filter(Q(PRICE_ITEM_LOCAL_NAME__icontains=local_name) |
Q(simplicity__icontains=local_name) |
Q(full_pinyin__icontains=local_name))
local_name_list = []
try:
for orderin dict_orders:
dict_order = {
'PRICE_ITEM_LOCAL_NAME':order.PRICE_ITEM_LOCAL_NAME,
'id':order.PRICE_ITEM_LOCAL_CODE
}
local_name_list.append(dict_order)
except:
local_name_list = []
dict_data = {
'data':local_name_list
}
return JsonResponse(dict_data)