SelectPage多功能下拉分頁選擇插件
多功能下拉選擇插件 SelectPage
簡潔而強(qiáng)大的下拉分頁選擇器；支持遠(yuǎn)程數(shù)據(jù)（AJAX）、 autocomplete、鍵盤快速導(dǎo)航操作、分頁展示、多選標(biāo)簽、i18n國際化支持等多功能的選擇器插件
入門指南、實(shí)例、文檔
更多實(shí)例、文檔請?jiān)L問：
項(xiàng)目GitHub地址：
https://github.com/TerryZ/SelectPage
插件效果
多選模式效果圖：
默認(rèn)單選模式效果圖：
純下拉選擇（不分頁）模式：
什么是SelectPage
功能特點(diǎn)
-
基于jQuery
-
兼容Bootstrap2、3樣式，以及非Bootstrap環(huán)境支持
-
也可應(yīng)用于無任何UI框架的原生HTML環(huán)境
-
輸入框輸入關(guān)鍵字快速查找（autocomplete）
-
結(jié)果列表分頁展示
-
使用鍵盤快速操作基本功能及分頁功能
-
允許使用靜態(tài)json數(shù)據(jù)源或ajax動(dòng)態(tài)請求的數(shù)據(jù)源
-
多項(xiàng)選擇以標(biāo)簽（Tag）形式展現(xiàn)
-
結(jié)果列表自動(dòng)判斷屏幕邊緣，避免內(nèi)容超出可視范圍
-
豐富的參數(shù)設(shè)置及功能API調(diào)用
-
支持i18n國際化多語言支持，自帶（中文、英文、德文、日文、西班牙文、巴西葡萄牙文）
瀏覽器兼容：IE8+、Chrome、Firefox、Safari等主流瀏覽器
插件基于jQuery開發(fā)，可在Bootstrap2、3環(huán)境下使用，亦可在原生無UI框架的環(huán)境下直接使用
怎么使用SelectPage
在 Github 或 碼云 上下載最新的版本，解壓后并放入需要使用的項(xiàng)目中
或使用 npm 指令
npm install selectpage
引用文件
HTML頁面元素設(shè)置
腳本初始化插件
//定義數(shù)組，在服務(wù)端返回的數(shù)據(jù)也以該格式返回：
Array[{Object},{...}]
var tag_data = [
{id:1 ,name:'Chicago Bulls',desc:'芝加哥公牛'},
{id:2 ,name:'Cleveland Cavaliers',desc:'克里夫蘭騎士'},
{id:3 ,name:'Detroit Pistons',desc:'底特律活塞'},
{id:4 ,name:'Indiana Pacers',desc:'印第安納步行者'}
];
//初始化插件
$('#selectPage').selectPage({
showField : 'desc',
keyField : 'id',
data : tag_data
});