bootstrap suggest搜索建議插件使用詳解
近日因工作需要看了下此插件。
首先下載bootstrap js包。添加此插件的引用。注意css樣式要引用,不能忘記。


前臺頁面代碼,因?yàn)闃侵髯龅氖沁x項(xiàng)卡切換查詢不同的結(jié)果。
<tr>
<th style="background: #fff;" width="30%">類型:</th>
<td width="70%">
<select class="selectpicker show-tick" id="SlideType">
<option value="2">生活</option>
<option value="1">首頁</option>
<option value="3">作品</option>
</select>
</td>
</tr>
<tr>
<th style="background:#fff">標(biāo)題:</th>
<td>
<div class="input-group" style="width:300px">
<input type="text" class="form-control" id="Title">
<div class="input-group-btn">
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
</div>
<!-- /btn-group -->
</div>
</td>
</tr>
//搜索建議框
/* $('#Title').keyup(function () {
var obj = $('#SlideType').val();
var txtName = $('#Title').val().trim();
$.post("/Slide/LoadSelect", { Index: obj, Name: txtName }, function (data) {
if (data != null) {
data = JSON.parse(data);
var testdataBsSuggest = $("#Title").bsSuggest({
indexId: 0,
indexKey: 1,
data: {
"value": data
}
}).on('onSetSelectValue', function (e, data) {
var url = "";
switch (obj) {
case "1": url = "";
break;
case "2": url = "HomeLife/HomeKnowledgeDetails?InfoGuid=";
break;
case "3": url = "";
break;
default:
}
$("#Url").val(url + data.id);
});
}
});
});*/
這是樓主根據(jù)不同的選項(xiàng)請求查詢不同的數(shù)據(jù),再在結(jié)果中搜索
下面說的就是第二種,是搜索插件內(nèi)部的請求。
如下:
function GetSuggest(obj) {
var testBsSuggest = $("#Title").bsSuggest({
url: "/Slide/LoadSelect?Keyword=" + obj + "",
getDataMethod: "firstByUrl",//獲取數(shù)據(jù)的方式,url:一直從url請求;data:從 options.data 獲??;firstByUrl:第一次從Url獲取全部數(shù)據(jù),之后從options.data獲取
effectiveFieldsAlias: { Title: "標(biāo)題" },
searchFields: ["Title"],
idField: "InfoGuid",
keyField: "Title",
effectiveFields: ["Title"],
showHeader: true,//顯示 header
showBtn: true, //不顯示下拉按鈕
delayUntilKeyup: false, //獲取數(shù)據(jù)的方式為 firstByUrl 時(shí),延遲到有輸入/獲取到焦點(diǎn)時(shí)才請求數(shù)據(jù)
}).on('onSetSelectValue', function (e, keyword) {
var url = "";
switch (obj) {
case "1": url = "";
break;
case "2": url = UrlJump(keyword.id);
break;
case "3": url = "";
break;
}
$("#Url").val(url + keyword.id.substring(0, keyword.id.length - 1));
});
}
對應(yīng)的后臺代碼:

最終頁面顯示的結(jié)果。

看看以下配置說明可以更改不同的需求。
####方法調(diào)用
禁用提示: $("input#test").bsSuggest("disable");
啟用提示: $("input#test").bsSuggest("enable");
銷毀插件: $("input#test").bsSuggest("destroy");
查看版本:$("input#test").bsSuggest("version");
####事件監(jiān)聽
onDataRequestSuccess: 當(dāng) AJAX 請求數(shù)據(jù)成功時(shí)觸發(fā),并傳回結(jié)果到第二個(gè)參數(shù)
onSetSelectValue:當(dāng)從下拉菜單選取值時(shí)觸發(fā),并傳回設(shè)置的數(shù)據(jù)到第二個(gè)參數(shù)
onUnsetSelectValue:當(dāng)設(shè)置了 idField,且自由輸入內(nèi)容時(shí)觸發(fā)(與背景警告色顯示同步)
$("#test")
.on('onDataRequestSuccess', function (event, result) {
console.log(result);
})
.on('onSetSelectValue', function (e, keyword) {
console.log('onSetSelectValue: ', keyword);
})
.on('onUnsetSelectValue', function (e) {
console.log('onUnsetSelectValue');
});
配置參數(shù)
參數(shù)列表中的值均為插件默認(rèn)值
var defaultOptions = {
url: null, //請求數(shù)據(jù)的 URL 地址
jsonp: null, //設(shè)置此參數(shù)名,將開啟jsonp功能,否則使用json數(shù)據(jù)結(jié)構(gòu)
data: {
value: []
}, //提示所用的數(shù)據(jù),注意格式
indexId: 0, //每組數(shù)據(jù)的第幾個(gè)數(shù)據(jù),作為input輸入框的 data-id,設(shè)為 -1 且 idField 為空則不設(shè)置此值
indexKey: 0, //每組數(shù)據(jù)的第幾個(gè)數(shù)據(jù),作為input輸入框的內(nèi)容
idField: '', //每組數(shù)據(jù)的哪個(gè)字段作為 data-id,優(yōu)先級高于 indexId 設(shè)置(推薦)
keyField: '', //每組數(shù)據(jù)的哪個(gè)字段作為輸入框內(nèi)容,優(yōu)先級高于 indexKey 設(shè)置(推薦)
/* 搜索相關(guān) */
autoSelect: true, //鍵盤向上/下方向鍵時(shí),是否自動(dòng)選擇值
allowNoKeyword: true, //是否允許無關(guān)鍵字時(shí)請求數(shù)據(jù)
getDataMethod: 'firstByUrl', //獲取數(shù)據(jù)的方式,url:一直從url請求;data:從 options.data 獲??;firstByUrl:第一次從Url獲取全部數(shù)據(jù),之后從options.data獲取
delayUntilKeyup: false, //獲取數(shù)據(jù)的方式 為 firstByUrl 時(shí),是否延遲到有輸入時(shí)才請求數(shù)據(jù)
ignorecase: false, //前端搜索匹配時(shí),是否忽略大小寫
effectiveFields: [], //有效顯示于列表中的字段,非有效字段都會過濾,默認(rèn)全部。
effectiveFieldsAlias: {}, //有效字段的別名對象,用于 header 的顯示
searchFields: [], //有效搜索字段,從前端搜索過濾數(shù)據(jù)時(shí)使用,但不一定顯示在列表中。effectiveFields 配置字段也會用于搜索過濾
twoWayMatch: true, // 是否雙向匹配搜索。為 true 即輸入關(guān)鍵字包含或包含于匹配字段均認(rèn)為匹配成功,為 false 則輸入關(guān)鍵字包含于匹配字段認(rèn)為匹配成功
multiWord: false, //以分隔符號分割的多關(guān)鍵字支持
separator: ',', //多關(guān)鍵字支持時(shí)的分隔符,默認(rèn)為半角逗號
/* UI */
autoDropup: false, //選擇菜單是否自動(dòng)判斷向上展開。設(shè)為 true,則當(dāng)下拉菜單高度超過窗體,且向上方向不會被窗體覆蓋,則選擇菜單向上彈出
autoMinWidth: false, //是否自動(dòng)最小寬度,設(shè)為 false 則最小寬度不小于輸入框?qū)挾?
showHeader: false, //是否顯示選擇列表的 header。為 true 時(shí),有效字段大于一列則顯示表頭
showBtn: true, //是否顯示下拉按鈕
inputBgColor: '', //輸入框背景色,當(dāng)與容器背景色不同時(shí),可能需要該項(xiàng)的配置
inputWarnColor: 'rgba(255,0,0,.1)', //輸入框內(nèi)容不是下拉列表選擇時(shí)的警告色
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', //提示框列表鼠標(biāo)懸浮的樣式
listHoverCSS: 'jhover', //提示框列表鼠標(biāo)懸浮的樣式名稱
clearable: false, // 是否可清除已輸入的內(nèi)容
/* key */
keyLeft: 37, //向左方向鍵,不同的操作系統(tǒng)可能會有差別,則自行定義
keyUp: 38, //向上方向鍵
keyRight: 39, //向右方向鍵
keyDown: 40, //向下方向鍵
keyEnter: 13, //回車鍵
/* methods */
fnProcessData: processData, //格式化數(shù)據(jù)的方法,返回?cái)?shù)據(jù)格式參考 data 參數(shù)
fnGetData: getData, //獲取數(shù)據(jù)的方法,無特殊需求一般不作設(shè)置
fnAdjustAjaxParam: null, //調(diào)整 ajax 請求參數(shù)方法,用于更多的請求配置需求。如對請求關(guān)鍵字作進(jìn)一步處理、修改超時(shí)時(shí)間等
fnPreprocessKeyword: null //搜索過濾數(shù)據(jù)前,對輸入關(guān)鍵字作進(jìn)一步處理方法。注意,應(yīng)返回字符串
};
至此結(jié)束。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS控件bootstrap suggest plugin使用方法詳解
- Bootstrap Search Suggest使用例子
- Bootstrap select多選下拉框?qū)崿F(xiàn)代碼
- Bootstrap select實(shí)現(xiàn)下拉框多選效果
- BootStrap中關(guān)于Select下拉框選擇觸發(fā)事件及擴(kuò)展
- BootStrap下拉框在firefox瀏覽器界面不友好的解決方案
- Bootstrap框架下下拉框select搜索功能
- Bootstrap模塊dropdown實(shí)現(xiàn)下拉框響應(yīng)
- 自定義Angular指令與jQuery實(shí)現(xiàn)的Bootstrap風(fēng)格數(shù)據(jù)雙向綁定的單選與多選下拉框
- bootstrap suggest下拉框使用詳解
相關(guān)文章
Javascript動(dòng)態(tài)綁定事件的簡單實(shí)現(xiàn)代碼
Javascript事件綁定的方法很多,很靈活。不過,作為比較簡單的動(dòng)態(tài)綁定,下面的代碼看似正確,但得不到預(yù)期的效果。2010-12-12
Echarts利用多X軸實(shí)現(xiàn)七天天氣預(yù)報(bào)效果的示例代碼
本文主要介紹了Echarts利用多X軸實(shí)現(xiàn)七天天氣預(yù)報(bào)效果的示例代碼,對于UI給出的設(shè)計(jì)圖,各個(gè)氣象網(wǎng)站都有類似的效果,分享給大家2021-10-10
Javascript Function對象擴(kuò)展之延時(shí)執(zhí)行函數(shù)
這篇文章主要介紹 在js里面怎么延時(shí)執(zhí)行一個(gè)函數(shù)?2010-07-07
JavaScript實(shí)現(xiàn)數(shù)組隨機(jī)排序的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)數(shù)組隨機(jī)排序的方法,涉及javascript數(shù)組遍歷與排序的相關(guān)技巧,需要的朋友可以參考下2015-06-06
ECMAScript 6即將帶給我們新的數(shù)組操作方法前瞻
這篇文章主要介紹了ECMAScript 6即將帶給我們新的數(shù)組操作方法前瞻,需要的朋友可以參考下2015-01-01
JavaScript來實(shí)現(xiàn)打開鏈接頁面的簡單實(shí)例
下面小編就為大家?guī)硪黄狫avaScript來實(shí)現(xiàn)打開鏈接頁面的簡單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
關(guān)于AOP在JS中的實(shí)現(xiàn)與應(yīng)用詳解
這篇文章主要給大家介紹了關(guān)于AOP在JS中的實(shí)現(xiàn)與應(yīng)用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05

