Select2 4 0 3自動補全外掛程式使用說明

2021-07-26 04:20:23 字數 1762 閱讀 9602

1、我專案中使用的是select2 4.0.3[特別需要強調的是selec2 4.0以後的版本和3.x的版本使用差距很大,具體可參見原始碼]

2、使用select2 外掛程式需要引入其js和css,還有4.0以後特定轉化語言的js檔案

//樣式

//js

3、前端頁面,乙個空的

標籤,裡面的name、id屬性自定義

動態請求資料

請求說明: 0

)、$("#blocksselect").select2()此處的id和select對應 1

)、language:"zh-cn", 需要引入zh-cn的js,漢化select2外掛程式,預設是英文的; 2

)、placeholder:,

allowclear: true,

配套使用,select2外掛程式輸入框預設顯示的值; 3

重寫原始碼中的方法,適應自己專案中的提示語; 4

)、minimuminputlength:1, 查詢時 至少輸入的字元個數 5

)、id :function(data), id

轉化函式,select2查詢出來的結果,如要選擇的話,需要轉化成id; 6

)、 ajax

請求,後端返回的json隨便定義,但是一定要返回乙個主鍵值,在轉換成id,這樣在select4.0之中才能選中,具體在processresults函式中完成,其中processresults函式中需要根據後端返回的引數來判斷動態載入的當前頁和總條數。

具體:pagination: , //

字元轉義處理

templateselection:formatreposelection, //

獲取輸入框選擇的值

templateresult:formatrepo //

查詢返回值渲染

5、頁面渲染函式

6、選中之後,在select2輸入框顯示函式

、返回的json轉換成id之後,可以直接刪除,如果通過某個清空的button來清空select2選中的值得話,可以通過:

$("#blocksselect").val("

請輸入房屋位址").trigger("change");這樣來設定

需要注意的是:select4.0以後,

1.如果返回的json裡面沒有id。則會出現查詢的物件無法選擇的問題。處理方式,就是在返回的josn物件裡面加入id這個唯一標示

2.formatreposelection

函式中,預設的是處理repo物件的id 和text 這2個屬性,而我這裡定義的json是是pkid和name,所以需要把pkid和name複製到id和text裡面。否則沒法顯示在介面上。另外一種簡單的處理方法,可以把json物件直接變成id和text的結構。這樣就不用定製select2裡面的方法了。

select2 4 0 3 空記錄時的處理

使用select2外掛程式,如果後台查詢沒有記錄,不能返回null,要返回乙個空陣列,不然會報錯 data is null 完整使用記錄如下 前台html標記 商 前台js supplier select2 datatype json delay 200,data function params p...

select2 4 0 3 空記錄時的處理

使用select2外掛程式,如果後台查詢沒有記錄,不能返回null,要返回乙個空陣列,不然會報錯 data is null 完整使用記錄如下 前台html標記 商 前台js supplier select2 datatype json delay 200,data function params p...

select2 4 0 3 空記錄時的處理

使用select2外掛程式,如果後台查詢沒有記錄,不能返回null,要返回乙個空陣列,不然會報錯 data is null 完整使用記錄如下 前台html標記 商 前台js supplier select2 datatype json delay 200,data function params p...