Select2 文檔中心導(dǎo)讀基于 jQuery 的可搜索、可標(biāo)記、支持遠(yuǎn)程數(shù)據(jù)的選擇框增強(qiáng)方案【免費(fèi)下載鏈接】select2Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.項(xiàng)目地址: https://gitcode.com/gh_mirrors/se/select2Select2 是一款基于 jQuery 的select下拉框增強(qiáng)插件本倉(cāng)庫(kù)gh_mirrors/se/select2對(duì)應(yīng)官方版本 4.1.0見(jiàn) package.json同時(shí)承載了其完整源碼、單元測(cè)試與官方文檔站點(diǎn)。本篇技術(shù)指南以倉(cāng)庫(kù)docs/目錄下文檔站首頁(yè)docs/README.md為核心脈絡(luò)系統(tǒng)講解 Select2 的六大核心能力——國(guó)際化i18n、遠(yuǎn)程數(shù)據(jù)AJAX、主題化Theming、插件化擴(kuò)展Adapters Decorators、動(dòng)態(tài)創(chuàng)建標(biāo)簽Tagging與瀏覽器兼容——并給出每項(xiàng)能力對(duì)應(yīng)的配置示例、源碼實(shí)現(xiàn)位置與測(cè)試依據(jù)幫助讀者快速建立對(duì) Select2 的整體認(rèn)知并據(jù)此上手深度定制。一、項(xiàng)目定位jQuery 對(duì)原生 select 框的完整替代文檔站首頁(yè)對(duì)項(xiàng)目的定位是一句話The jQuery replacement for select boxesjQuery 對(duì) select 框的替代方案。它并不是一個(gè)簡(jiǎn)單的樣式美化庫(kù)而是在原生select的能力基礎(chǔ)上提供了一套完整的增強(qiáng)體系可搜索用戶可以直接在控件內(nèi)輸入關(guān)鍵字過(guò)濾候選結(jié)果標(biāo)簽Tagging允許用戶輸入一個(gè)不在候選列表中的值并即時(shí)創(chuàng)建為新選項(xiàng)遠(yuǎn)程數(shù)據(jù)集Remote data通過(guò) AJAX 從服務(wù)器按需加載數(shù)據(jù)無(wú)限滾動(dòng)Infinite scrolling對(duì)大型遠(yuǎn)程數(shù)據(jù)集支持分頁(yè)加載以及 RTL 語(yǔ)言環(huán)境、變音符號(hào)diacritics匹配、自定義渲染等眾多高頻需求。倉(cāng)庫(kù)根目錄的 README.md 進(jìn)一步列出了典型使用場(chǎng)景增強(qiáng)原生 select 的搜索能力、提供更好的多選界面、通過(guò) AJAX 加載可搜索數(shù)據(jù)、支持多級(jí)optgroup嵌套原生 select 只允許一層嵌套Select2 不受此限制、即時(shí)創(chuàng)建新標(biāo)簽、基于搜索詞部分加載大型遠(yuǎn)程數(shù)據(jù)集、滾動(dòng)到底部自動(dòng)加載下一頁(yè)、以及自定義結(jié)果與已選內(nèi)容的渲染模板。事實(shí)邊界說(shuō)明關(guān)于瀏覽器兼容性文檔站首頁(yè)聲明支持現(xiàn)代與舊版瀏覽器包括Internet Explorer 11倉(cāng)庫(kù)根目錄 README.md 中給出的兼容清單為 IE 8、Chrome 8、Firefox 10、Safari 3、Opera 10.6。二者均屬項(xiàng)目官方聲明具體以你所使用版本的發(fā)布說(shuō)明為準(zhǔn)。二、文檔首頁(yè)六大核心特性詳解文檔站首頁(yè)用六張?zhí)匦钥ㄆ爬?Select2 的核心賣點(diǎn)以下逐一展開(kāi)并結(jié)合倉(cāng)庫(kù)源碼與docs/下對(duì)應(yīng)章節(jié)的詳細(xì)文檔進(jìn)行深入說(shuō)明。2.1 國(guó)際化40 內(nèi)置語(yǔ)言、RTL 與變音符號(hào)特性卡片原文In your language —— Select2 comes with support for RTL environments and diacritics, and over 40 languages built-in.內(nèi)置語(yǔ)言數(shù)量docs/README.md聲明內(nèi)置40 種語(yǔ)言。從倉(cāng)庫(kù)源碼目錄 src/js/select2/i18n 可以看到 60 個(gè)獨(dú)立語(yǔ)言模塊文件覆蓋中文zh-CN.js、zh-TW.js、日文、韓文、阿拉伯文、希伯來(lái)文、印地語(yǔ)、歐洲各主要語(yǔ)種等每種語(yǔ)言均以 AMD 模塊形式提供翻譯對(duì)象。消息翻譯Message translations當(dāng)出現(xiàn)沒(méi)有搜索結(jié)果還需要輸入更多字符才能搜索等提示時(shí)Select2 會(huì)展示翻譯后的消息。使用方式詳見(jiàn) docs/i18n.md加載語(yǔ)言文件在頁(yè)面引入select2.js之后、按相同順序引入對(duì)應(yīng)語(yǔ)言文件如dist/js/i18n/es.js初始化時(shí)指定語(yǔ)言$(.js-example-language).select2({ language: es });通過(guò) HTML 屬性聲明語(yǔ)言語(yǔ)言不必在初始化時(shí)定義也可以直接設(shè)置在任何父元素的[lang]屬性上如[langes]Select2 會(huì)自動(dòng)向上查找自定義翻譯對(duì)象當(dāng)語(yǔ)言文件中找不到指定字符串時(shí)Select2 會(huì)回退到內(nèi)置語(yǔ)言同時(shí)你也可以直接傳入一個(gè)翻譯對(duì)象覆蓋任意消息language: { // 所有條目都必須是返回字符串的函數(shù) inputTooShort: function() { return You must enter more characters...; } }從源碼結(jié)構(gòu)看翻譯機(jī)制由select2/translation模塊統(tǒng)一處理參見(jiàn) src/js/select2/translation.jslanguage配置項(xiàng)既可以傳字符串解析為語(yǔ)言文件/內(nèi)置語(yǔ)言也可以直接傳翻譯對(duì)象。RTL 支持Select2 在select或其任何父元素設(shè)置了dirrtl屬性時(shí)自動(dòng)以 RTL 方式工作也可以顯式初始化$(.js-example-rtl).select2({ dir: rtl });變音符號(hào)diacritics轉(zhuǎn)寫(xiě)匹配Select2 默認(rèn)的 matcher 會(huì)把帶變音符號(hào)的字母轉(zhuǎn)寫(xiě)為對(duì)應(yīng)的 ASCII 字母后再匹配例如輸入aero也能命中Aeróbics、águilas等選項(xiàng)。該能力由源碼 src/js/select2/diacritics.js 提供——該文件包含一張約 800 行的 Unicode 字符到 ASCII 字母的映射表如\u00C0→A、\u00E9→e等初始化時(shí)無(wú)需任何額外配置即可生效。2.2 遠(yuǎn)程數(shù)據(jù)支持基于 AJAX 的高效大數(shù)據(jù)集搜索特性卡片原文Using AJAX you can efficiently search large lists of items.Select2 內(nèi)置了基于 jQuery AJAX 方法的遠(yuǎn)程數(shù)據(jù)支持詳細(xì)教程見(jiàn) docs/data-sources/ajax.md。最簡(jiǎn)用法只需提供 URL 與數(shù)據(jù)類型select classjs-example-data-ajax/select$(.js-example-data-ajax).select2({ ajax: { url: https://api.github.com/search/repositories, dataType: json } });ajax配置對(duì)象中的所有選項(xiàng)都會(huì)被原樣傳給 jQuery 的$.ajax或你指定的transport函數(shù)。請(qǐng)求參數(shù)用戶打開(kāi)控件時(shí)除非設(shè)置了minimumInputLength以及每次在搜索框輸入時(shí)Select2 都會(huì)發(fā)起請(qǐng)求默認(rèn)攜帶以下查詢參數(shù)參數(shù)含義term搜索框中的當(dāng)前搜索詞q與term內(nèi)容相同兼容舊接口_type請(qǐng)求類型通常為query分頁(yè)請(qǐng)求時(shí)為query_appendpage請(qǐng)求的頁(yè)碼僅分頁(yè)無(wú)限滾動(dòng)搜索時(shí)發(fā)送典型請(qǐng)求形如https://api.github.com/search/repositories?termsel_typequeryqsel。可通過(guò)重寫(xiě)ajax.data增加自定義查詢參數(shù)$(#mySelect2).select2({ ajax: { url: https://api.github.com/orgs/select2/repos, data: function(params) { var query { search: params.term, type: public } // 實(shí)際請(qǐng)求參數(shù)為 ?search[term]typepublic return query; } } });響應(yīng)轉(zhuǎn)換通過(guò)ajax.processResults把 API 返回結(jié)構(gòu)轉(zhuǎn)換為 Select2 期望的{ results: [...] }格式processResults: function(data) { // 把響應(yīng)頂層 key 從 items 轉(zhuǎn)為 results return { results: data.items }; }性能關(guān)鍵點(diǎn)原文檔明確提示對(duì)于遠(yuǎn)程數(shù)據(jù)源Select2 在某個(gè)選項(xiàng)第一次被選中之前不會(huì)創(chuàng)建對(duì)應(yīng)的option元素這是出于性能考慮一旦創(chuàng)建該option會(huì)保留在 DOM 中即使后續(xù)選擇被改變也不移除。此外遠(yuǎn)程接口的結(jié)果過(guò)濾應(yīng)在服務(wù)端完成原文檔引用了 issue #2321 的官方解釋若無(wú)法服務(wù)端過(guò)濾可改用數(shù)組數(shù)據(jù)源見(jiàn) docs/data-sources/arrays.md。預(yù)置默認(rèn)值可以為 AJAX 數(shù)據(jù)源預(yù)置已選項(xiàng)在 HTML 中直接寫(xiě)帶selectedselected的option其中包含要顯示的 value 與 text以編程方式添加則需動(dòng)態(tài)創(chuàng)建并追加新的Option對(duì)象參見(jiàn) docs/programmatic-control/add-select-clear-items.md。分頁(yè)與無(wú)限滾動(dòng)通過(guò)重寫(xiě)ajax.data加入page參數(shù)當(dāng)前頁(yè)碼在params.page中并在響應(yīng)中返回pagination.more布爾值告知是否還有更多頁(yè)$(#mySelect2).select2({ ajax: { url: https://api.github.com/search/repositories, data: function(params) { var query { search: params.term, page: params.page || 1 } return query; } } });{ results: [ { id: 1, text: Option 1 }, { id: 2, text: Option 2 } ], pagination: { more: true } }若服務(wù)端不返回pagination.more可在processResults中自行推算例如 API 返回count_filtered總數(shù)、每頁(yè) 10 條時(shí)processResults: function(data, params) { params.page params.page || 1; return { results: data.results, pagination: { more: (params.page * 10) data.count_filtered } }; }請(qǐng)求限流用ajax.delay毫秒讓 Select2 在用戶停止輸入一段時(shí)間后再發(fā)請(qǐng)求ajax: { delay: 250 // 用戶停止輸入 250ms 后再觸發(fā)請(qǐng)求 }動(dòng)態(tài) URLajax.url支持傳入回調(diào)函數(shù)根據(jù)params含當(dāng)前搜索詞params.term動(dòng)態(tài)生成 URLajax: { url: function(params) { return /some/url/ params.term; } }自定義 transport默認(rèn) transport 是jQuery.ajax可通過(guò)ajax.transport替換為自定義請(qǐng)求庫(kù)ajax: { transport: function(params, success, failure) { var request new AjaxRequest(params.url, params); request.on(success, success); request.on(failure, failure); } }底層實(shí)現(xiàn)佐證源碼 src/js/select2/data/ajax.js 中的AjaxAdapter繼承自ArrayAdapter。其_applyDefaults方法為ajax配置提供默認(rèn)實(shí)現(xiàn)默認(rèn)data回調(diào)把params擴(kuò)展為{ q: params.term }默認(rèn)transport即$.ajax(...)并鏈?zhǔn)秸{(diào)用then(success)/fail(failure)query方法會(huì)先abort()上一次未完成的請(qǐng)求JSONP 請(qǐng)求除外以避免競(jìng)態(tài)同時(shí)支持函數(shù)形式的url與data并在收到響應(yīng)后用processResults歸一化結(jié)果、校驗(yàn)results必須為數(shù)組否則在debug: true時(shí)向控制臺(tái)輸出錯(cuò)誤。docs/data-sources/ajax.md末尾還提供了完整的 GitHub 倉(cāng)庫(kù)搜索示例結(jié)合了delay、data、processResults、cache: true、minimumInputLength與自定義templateResult/templateSelection是很好的落地參考。2.3 主題化基于 Sass 構(gòu)建、可完全換膚特性卡片原文Fully skinnable, CSS built with Sass and an optional theme for Bootstrap 4.Select2 的樣式體系由 Sass 構(gòu)建源碼位于 src/scsscore.scss 為樣式入口_dropdown.scss、_multiple.scss、_single.scss分別對(duì)應(yīng)下拉、多選、單選的布局細(xì)節(jié)內(nèi)置兩套主題目錄theme/default默認(rèn)主題與 theme/classic每套主題內(nèi)部通過(guò)_defaults.scss定義 Sass 變量、_single.scss/_multiple.scss定義單/多選外觀、layout.scss組織整體布局主題還使用了 src/scss/mixins/_gradients.scss 中的漸變 mixin 來(lái)實(shí)現(xiàn)經(jīng)典的立體按鈕效果。初始化時(shí)通過(guò)theme配置項(xiàng)選擇主題默認(rèn)default還可通過(guò)dropdownCssClass/selectionCssClass追加自定義 CSS 類其中:all:特殊值可把原生select元素上的所有 CSS 類原樣拷貝到對(duì)應(yīng)容器上。外觀相關(guān)的完整說(shuō)明見(jiàn) docs/appearance.md。2.4 插件化擴(kuò)展Adapter 模式 Decorator 裝飾器特性卡片原文The plugin system allows you to easily customize Select2 to work exactly how you want it to.從版本 4.0 起Select2 采用Adapter適配器模式作為擴(kuò)展機(jī)制幾乎所有的內(nèi)置功能搜索、遠(yuǎn)程數(shù)據(jù)、標(biāo)簽、占位符、清除按鈕等都是由內(nèi)置適配器實(shí)現(xiàn)的詳細(xì)文檔見(jiàn) docs/advanced/adapters-and-decorators.md。所有自定義適配器必須實(shí)現(xiàn)Adapter接口的四個(gè)方法// 返回要渲染的 jQuery/DOM 元素Select2 會(huì)自動(dòng)將其放入 DOM Adapter.render function() { return $jq; }; // 綁定 Select2 與 DOM 事件container 上可用 on/trigger 監(jiān)聽(tīng)和觸發(fā)事件 Adapter.bind function(container, $container) {}; // 定位渲染出的元素?cái)?shù)據(jù)適配器dataAdapter不會(huì)調(diào)用此方法 Adapter.position function($rendered, $defaultContainer) {}; // 銷毀事件與 DOM在調(diào)用 select2(destroy) 時(shí)觸發(fā) Adapter.destroy function() {};覆蓋默認(rèn)selectionAdapter的適配器還需實(shí)現(xiàn)SelectionAdapter.update(data)始終傳入數(shù)組即使只支持單選覆蓋默認(rèn)dataAdapter的適配器還需實(shí)現(xiàn)DataAdapter.current(callback)與DataAdapter.query(params, callback)params.term為用戶搜索詞params.page為分頁(yè)頁(yè)碼。各內(nèi)置適配器的詳細(xì)接口說(shuō)明分布在 docs/advanced/default-adapters 目錄data、results、selection、dropdown 等。Decorator裝飾器用于把適配器的能力通過(guò)配置選項(xiàng)暴露出來(lái)。通過(guò)Utils.Decorate可組合裝飾器$.fn.select2.amd.require( [select2/utils, select2/selection/single, select2/selection/placeholder], function(Utils, SingleSelection, Placeholder) { var CustomSelectionAdapter Utils.Decorate(SingleSelection, Placeholder); } );AMD 兼容性Select2 自帶支持 AMD 與 CommonJS 的 UMD 封裝可配合 RequireJS 等加載器使用當(dāng)構(gòu)建環(huán)境改變了模塊名導(dǎo)致找不到語(yǔ)言文件時(shí)可用amdLanguageBase手動(dòng)指定語(yǔ)言文件的前綴路徑見(jiàn) docs/getting-started/builds-and-modules.md。2.5 動(dòng)態(tài)創(chuàng)建選項(xiàng)Tagging 標(biāo)簽功能特性卡片原文Allow users to type in a new option and add it on the fly.除了預(yù)置選項(xiàng)菜單Select2 還允許用戶把搜索框中輸入的新文本即時(shí)創(chuàng)建為選項(xiàng)詳見(jiàn) docs/tagging.md。啟用方式是在初始化時(shí)設(shè)置tags: trueselect option selectedselectedorange/option optionwhite/option optionpurple/option /select$(.js-example-tags).select2({ tags: true });開(kāi)啟后用戶既可選擇既有選項(xiàng)也可通過(guò)下拉中排第一的當(dāng)前輸入內(nèi)容創(chuàng)建新選項(xiàng)。多選 標(biāo)簽multiplemultiple與tags: true可組合使用用戶輸入一個(gè)下拉里不存在的值即可新增。自動(dòng)分詞tokenization用tokenSeparators指定分隔符用戶輸入分隔符時(shí)自動(dòng)把前面的內(nèi)容提交為標(biāo)簽$(.js-example-tokenizer).select2({ tags: true, tokenSeparators: [,, ] })自定義創(chuàng)建邏輯通過(guò)createTag回調(diào)控制標(biāo)簽的創(chuàng)建與屬性。返回null可禁用創(chuàng)建如要求必須包含符號(hào)返回對(duì)象可為新標(biāo)簽附加自定義屬性如newTag: true$(select).select2({ createTag: function(params) { var term $.trim(params.term); if (term ) { return null; } return { id: term, text: term, newTag: true // 附加自定義屬性 } } });控制標(biāo)簽在下拉中的位置通過(guò)insertTag回調(diào)調(diào)整新標(biāo)簽插入結(jié)果數(shù)組的位置$(select).select2({ insertTag: function(data, tag) { data.push(tag); // 把標(biāo)簽插到結(jié)果末尾 } });兼容性說(shuō)明在 v3.5 時(shí)代tags選項(xiàng)用于加載數(shù)組數(shù)據(jù)v4.0 起tags專指標(biāo)簽功能為向后兼容tags仍可接受對(duì)象數(shù)組并按data選項(xiàng)的方式處理見(jiàn) docs/data-sources/arrays.md。2.6 瀏覽器支持文檔站首頁(yè)聲明 Select2 對(duì)現(xiàn)代與舊版瀏覽器均有內(nèi)置支持包括 Internet Explorer 11倉(cāng)庫(kù)根目錄 README.md 給出的兼容清單為 IE 8、Chrome 8、Firefox 10、Safari 3、Opera 10.6。在docs/README.md的表述中這一能力被概括為Full browser support。三、配置項(xiàng)總覽docs/configuration/options-api.md羅列了 Select2 的全部配置項(xiàng)下表匯總了文檔站首頁(yè)六大特性所涉及的關(guān)鍵配置完整表格見(jiàn) docs/configuration/options-api.md配置項(xiàng)類型默認(rèn)值對(duì)應(yīng)能力ajaxobjectnullAJAX 遠(yuǎn)程數(shù)據(jù)源dataarray of objectsnull數(shù)組數(shù)據(jù)源languagestring / object英文翻譯消息翻譯 / 國(guó)際化dirstringltrRTL 文本方向themestringdefault主題appearancetagsboolean / arrayfalse標(biāo)簽taggingtokenizercallback—自由文本自動(dòng)分詞tokenSeparatorsarraynull分詞分隔符dataAdapter—SelectAdapter覆蓋內(nèi)置數(shù)據(jù)適配器dropdownAdapter—DropdownAdapter覆蓋內(nèi)置下拉適配器resultsAdapter—ResultsAdapter覆蓋內(nèi)置結(jié)果適配器selectionAdapter—Single/MultipleSelection覆蓋內(nèi)置選擇適配器matchercallback—自定義結(jié)果匹配minimumInputLengthinteger0觸發(fā)搜索的最小字符數(shù)maximumInputLengthinteger0搜索詞最大長(zhǎng)度限制minimumResultsForSearchinteger0結(jié)果數(shù)下限控制是否顯示搜索框maximumSelectionLengthinteger0多選控件可選最大項(xiàng)數(shù)小于 1 不限制placeholderstring / objectnull占位提示文本allowClearbooleanfalse可清除已選項(xiàng)multiplebooleanfalse多選pillbox模式初始化時(shí)自動(dòng)映射 HTML 的multiple屬性widthstringresolve容器寬度策略closeOnSelectbooleantrue選中后是否關(guān)閉下拉selectOnClosebooleanfalse關(guān)閉下拉時(shí)自動(dòng)選中高亮項(xiàng)templateResult/templateSelectioncallback—自定義結(jié)果 / 已選項(xiàng)渲染escapeMarkupcallbackUtils.escapeMarkup自定義模板內(nèi)容自動(dòng)轉(zhuǎn)義debugbooleanfalse在瀏覽器控制臺(tái)輸出調(diào)試信息disabledbooleanfalse禁用控件dropdownAutoWidthbooleanfalse打開(kāi)時(shí)動(dòng)態(tài)計(jì)算下拉寬度dropdownParentjQuery 選擇器 / DOM 節(jié)點(diǎn)$(document.body)自定義下拉容器位置dropdownCssClass/selectionCssClassstring追加 CSS 類:all:復(fù)制原生元素全部類sortercallback—自定義結(jié)果排序amdLanguageBasestring./i18n/AMD 加載器語(yǔ)言文件路徑scrollAfterSelectbooleanfalse多選 closeOnSelect: false時(shí)控制結(jié)果列表是否回滾到首個(gè)選項(xiàng)四、安裝與分發(fā)方式docs/getting-started/installation.md與docs/getting-started/builds-and-modules.md介紹了多種安裝途徑docs/README.md首頁(yè)的 Releases / GitHub 按鈕即引導(dǎo)至對(duì)應(yīng)發(fā)布渠道1. CDN 引入最快上手Select2 托管于 jsDelivr 與 cdnjs在頁(yè)面head中引入編譯好的 CSS 與 JS 即可link hrefhttps://cdn.jsdelivr.net/npm/select24.1.0/dist/css/select2.min.css relstylesheet/ script srchttps://cdn.jsdelivr.net/npm/select24.1.0/dist/js/select2.min.js /script注意新版本發(fā)布后CDN 同步需要一定時(shí)間。2. Bower 安裝在bower.json中聲明依賴后執(zhí)行bower installdependencies: { select2: ~4.1 }或直接運(yùn)行bower install select2。編譯產(chǎn)物位于項(xiàng)目的vendor/select2/dist/css/與vendor/select2/dist/js/之后按上述方式引入select2.min.css與select2.min.js。3. Webpack Encore先yarn install select2再在 JS 中require(select2)、在 SCSS 中import ~select2;。當(dāng)前倉(cāng)庫(kù)版本 4.1.0見(jiàn) package.json其main指向dist/js/select2.jsstyle指向dist/css/select2.css。4. 手動(dòng)安裝可從 GitHub 倉(cāng)庫(kù) Releases 頁(yè)面下載指定版本的發(fā)布包把dist目錄中的文件復(fù)制進(jìn)項(xiàng)目并引入link hrefpath/to/select2.min.css relstylesheet/ script srcpath/to/select2.min.js /script構(gòu)建類型選擇Select2 提供兩種構(gòu)建——標(biāo)準(zhǔn)構(gòu)建select2.js/select2.min.js覆蓋絕大多數(shù)常用功能大多數(shù)用戶應(yīng)選擇它與全量構(gòu)建select2.full.js/select2.full.min.js僅在需要 jquery.mousewheel 等推薦包含項(xiàng)時(shí)使用。dist目錄下的文件同時(shí)兼容 AMD也可直接以src目錄源碼jquery.select2或select2/core作為模塊入口。五、數(shù)據(jù)源機(jī)制對(duì)比docs/data-sources目錄對(duì)三種數(shù)據(jù)來(lái)源做了系統(tǒng)說(shuō)明理解其差異有助于正確選型數(shù)據(jù)源配置項(xiàng)特點(diǎn)關(guān)鍵行為數(shù)組data本地?cái)?shù)據(jù)立即可用立即渲染為option元素可通過(guò)option selected預(yù)置選中項(xiàng)AJAXajax遠(yuǎn)程大數(shù)據(jù)集、按需搜索選項(xiàng)首次被選中前不創(chuàng)建option結(jié)果過(guò)濾須在服務(wù)端完成格式化id/text字段自定義數(shù)據(jù)對(duì)象結(jié)構(gòu)通過(guò)id/text屬性定義每個(gè)數(shù)據(jù)對(duì)象的標(biāo)識(shí)與顯示文本六、文檔站結(jié)構(gòu)地圖docs/目錄即官方文檔站基于 MkDocs 構(gòu)建配置見(jiàn) mkdocs.yml的全部 Markdown 源文件除本文已展開(kāi)的章節(jié)外還可按需查閱入門basic-usage.md單/多選初始化、installation.md、builds-and-modules.md配置options-api.md全量配置表、defaults.md全局默認(rèn)值、data-attributes.mdHTML 屬性驅(qū)動(dòng)配置外觀與交互appearance.md、dropdown.md、selections.md、placeholders.md、searching.md、tagging.md、i18n.md程序化控制methods.md、events.md、retrieving-selections.md、add-select-clear-items.md高級(jí)主題adapters-and-decorators.md 與 default-adapters 系列升級(jí)與排查migrating-from-35.mdv3.5 → v4.0、new-in-40.md、common-problems.md。七、質(zhì)量保障測(cè)試與工程化倉(cāng)庫(kù)的健壯性有完整的自動(dòng)化測(cè)試支撐tests/目錄按模塊分門別類tests/data/覆蓋數(shù)組、標(biāo)簽、tokenizer、最小/最大輸入長(zhǎng)度等數(shù)據(jù)層行為如 tags-tests.js、tokenizer-tests.jstests/selection/覆蓋單選、多選、占位符、清除、搜索等交互tests/dropdown/與tests/results/覆蓋下拉定位、搜索、無(wú)限滾動(dòng)等tests/integration/驗(yàn)證與 jQuery 調(diào)用的集成。測(cè)試通過(guò) QUnit 運(yùn)行入口見(jiàn)tests/unit-jq*.html、tests/integration-jq*.html構(gòu)建由 Gruntfile.js 驅(qū)動(dòng)涉及源碼合并、壓縮、Sass 編譯與 QUnit 測(cè)試任務(wù)。綜上docs/README.md文檔站首頁(yè)為 Select2 劃定了搜索、標(biāo)簽、遠(yuǎn)程數(shù)據(jù)、無(wú)限滾動(dòng)、主題化、可擴(kuò)展六大能力邊界。以它為索引配合本倉(cāng)庫(kù)的源碼src/js/select2/、樣式src/scss/、測(cè)試tests/與各章節(jié) Markdown 文檔即可從會(huì)用走向懂原理、能定制這也是本倉(cāng)庫(kù)作為完整可研讀代碼庫(kù)的最大價(jià)值所在?！久赓M(fèi)下載鏈接】select2Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.項(xiàng)目地址: https://gitcode.com/gh_mirrors/se/select2創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考