//所有參數的默認配置
var defaultOptions = {
url: null, //請求數據的 URL 地址
jsonp: null, //設置此參數名,將開啟jsonp功能,否則使用json數據結構
data: {
value: []
}, //提示所用的數據,注意格式
indexId: 0, //每組數據的第幾個數據,作為input輸入框的 data-id,設為 -1 且 idField 為空則不設置此值
indexKey: 0, //每組數據的第幾個數據,作為input輸入框的內容
idField: '', //每組數據的哪個字段作為 data-id,優先級高於 indexId 設置(推薦)
keyField: '', //每組數據的哪個字段作為輸入框內容,優先級高於 indexKey 設置(推薦)
/* 搜索相關 */
autoSelect: true, // 鍵盤向上/下方向鍵時,是否自動選擇值
allowNoKeyword: TRUE, // 是否允許無關鍵字時請求數據
getDataMethod: 'firstByUrl', // 獲取數據的方式,url:一直從url請求;data:從 options.data 獲取;firstByUrl:第一次從Url獲取全部數據,之后從options.data獲取
delayUntilKeyup: false, // 獲取數據的方式 為 firstByUrl 時,是否延遲到有輸入時才請求數據
ignorecase: false, // 前端搜索匹配時,是否忽略大小寫
effectiveFields: [], // 有效顯示於列表中的字段,非有效字段都會過濾,默認全部有效。
effectiveFieldsAlias: {}, // 有效字段的別名對象,用於 header 的顯示
searchFields: [], // 有效搜索字段,從前端搜索過濾數據時使用,但不一定顯示在列表中。effectiveFields 配置字段也會用於搜索過濾
twoWayMatch: true, // 是否雙向匹配搜索。為 true 即輸入關鍵字包含或包含於匹配字段均認為匹配成功,為 false 則輸入關鍵字包含於匹配字段認為匹配成功
multiWord: false, // 以分隔符號分割的多關鍵字支持
separator: ',', // 多關鍵字支持時的分隔符,默認為半角逗號
delay: 300, // 搜索觸發的延時時間間隔,單位毫秒
emptyTip: '', // 查詢為空時顯示的內容,可為 html
searchingTip: '搜索中...', // ajax 搜索時顯示的提示內容,當搜索時間較長時給出正在搜索的提示
hideOnSelect: false, // 鼠標從列表單擊選擇了值時,是否隱藏選擇列表
/* UI */
autoDropup: false, //選擇菜單是否自動判斷向上展開。設為 true,則當下拉菜單高度超過窗體,且向上方向不會被窗體覆蓋,則選擇菜單向上彈出
autoMinWidth: false, //是否自動最小寬度,設為 false 則最小寬度不小於輸入框寬度
showHeader: false, //是否顯示選擇列表的 header。為 true 時,有效字段大於一列則顯示表頭
showBtn: true, //是否顯示下拉按鈕
inputBgColor: '', //輸入框背景色,當與容器背景色不同時,可能需要該項的配置
inputWarnColor: 'rgba(255,0,0,.1)', //輸入框內容不是下拉列表選擇時的警告色
listStyle: {
'padding-top': 0,
'max-height': '375px',
'max-width': '800px',
'overflow': 'auto',
'width': 'auto',
'transition': '0.3s',
'-webkit-transition': '0.3s',
'-moz-transition': '0.3s',
'-o-transition': '0.3s'
}, //列表的樣式控制
listAlign: 'left', //提示列表對齊位置,left/right/auto
listHoverStyle: 'background: #07d; color:#fff', //提示框列表鼠標懸浮的樣式
listHoverCSS: 'jhover', //提示框列表鼠標懸浮的樣式名稱
clearable: false, // 是否可清除已輸入的內容
/* key */
keyLeft: 37, //向左方向鍵,不同的操作系統可能會有差別,則自行定義
keyUp: 38, //向上方向鍵
keyRight: 39, //向右方向鍵
keyDown: 40, //向下方向鍵
keyEnter: 13, //回車鍵
/* methods */
fnProcessData: processData, //格式化數據的方法,返回數據格式參考 data 參數
fnGetData: getData, //獲取數據的方法,無特殊需求一般不作設置
fnAdjustAjaxParam: null, //調整 ajax 請求參數方法,用於更多的請求配置需求。如對請求關鍵字作進一步處理、修改超時時間等
fnPreprocessKeyword: null //搜索過濾數據前,對輸入關鍵字作進一步處理方法。注意,應返回字符串
};
//請根據自身實際情況選擇修改配置//初始化
$("#name").bsSuggest('init', {
url: "/test/test/testList.do?keyword=",
effectiveFields: ["name"],
searchFields: [ "name"],
effectiveFieldsAlias:{name: "姓名"},
clearable: true,
idField: "id",
keyField: "name"
}).on('onDataRequestSuccess', function (e, result) {//當 AJAX 請求數據成功時觸發,並傳回結果到第二個參數
console.log('onDataRequestSuccess: ', result);
}).on('onSetSelectValue', function (e, selectedData, selectedRawData) {//當從下拉菜單選取值時觸發,並傳回設置的數據到第二個參數
console.log('onSetSelectValue: ', e.target.value, selectedData, selectedRawData);
}).on('onUnsetSelectValue', function () {//當設置了 idField,且自由輸入內容時觸發(與背景警告色顯示同步)
console.log('onUnsetSelectValue');
}).on('onShowDropdown', function (e, data) {//下拉菜單顯示時觸發
console.log('onShowDropdown', e.target.value, data);
}).on('onHideDropdown', function (e, data) {//下拉菜單隱藏式觸發
console.log('onHideDropdown', e.target.value, data);
});