【JS】MVC Select2.js使用小结

问题参考：https://www.jb51.net/article/95561.htm

select2.js版本号：3.3.2，不是最新的版本，使用方法和官网上介绍的最新版本有点不太一样。

使用需要引入：select2.min.css和select2.min.js

js:

$(document).ready(function () {
//////select2.min.js
function formatRepo(repo) {
var markup = "<table class='movie-result'><tr>";
markup += "<td valign='top'><img width='80px' src='data:" + repo.imgsrc+ "'/></td>";
markup += "<td valign='top'><h5>" + repo.text + "</h5>";
markup += "<div class='movie-synopsis'>" + repo.ISSN + "</div>";
markup += "</td></tr></table>"
return markup;
}
function formatRepoSelection(repo) {
return repo.text;
}
$("#select_CNKI").select2({
placeholder: "请输入期刊名进行知网数据库查询",
minimumInputLength: 1,
ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
url: "/home/myGetCNKI",
delay: 250,
dataType: 'json',
data: function (term) {
return {
search: term, // search term
};
},
results: function (data) { // parse the results into the format expected by Select2.
// since we are using custom formatting functions we do not need to alter remote JSON data
return {
results: data
};
},
cache:true
},
formatResult: formatRepo, // omitted for brevity, see the source of this page
formatSelection: formatRepoSelection, // omitted for brevity, see the source of this page
dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
escapeMarkup: function (m) {
return m;
} // we do not want to escape markup since we are displaying html in results
})
})

浏览器发出的Ajax访问需求格式为：/home/mygetCNKI/?search=<parameters>，可以添加任意多个，改data：选项就是。

HTML:

老版本的只能用在<input>标签里面，新版本的要用在<select>里面

<input id="select_CNKI" class="span12 select2"> 

根据css，网页会显示为：

Controller:

 '获取数据库中知网的期刊数据
Class CNKIBookInfo
Public Property id As Integer
Public Property text As String
Public Property ISSN As String
Public Property imgsrc As String
End Class
Function myGetCNKI(ByVal search As String) As JsonResult
Dim CNKIsearchStr As String = search.Replace(" ", "")
Dim mybookList As List(Of CNKIBookInfo) = New List(Of CNKIBookInfo)
If CNKIsearchStr = String.Empty Then
Return Json(mybookList, JsonRequestBehavior.AllowGet)
Exit Function
End If
Dim CNKIlist = AllinoneDb.Allinone_ISSNInfo.Where(Function(s) s.ISSN_Name.Contains(CNKIsearchStr)).Take(20).ToList
If IsNothing(CNKIlist) Then
Return Json(mybookList, JsonRequestBehavior.AllowGet)
Exit Function
End If
For Each item In CNKIlist
Dim newBook As CNKIBookInfo = New CNKIBookInfo
newBook.id = item.ISSN_ID
newBook.text = item.ISSN_Name
newBook.ISSN = item.ISSN_Code
newBook.imgsrc = item.ISSN_Cover_Img
mybookList.Add(newBook)
Next
Return Json(mybookList, JsonRequestBehavior.AllowGet)
End Function

要特别注意：VB语言参数是忽略大小写的，Javascript读data的时候是大小写敏感的。稍微不注意，就会不能正确显示

最终的结果会是这样：