您好,登錄后才能下訂單哦!
近日因工作需要看了下此插件。
首先下載bootstrap js包。添加此插件的引用。注意css樣式要引用,不能忘記。
前臺(tái)頁(yè)面代碼,因?yàn)闃侵髯龅氖沁x項(xiàng)卡切換查詢不同的結(jié)果。
<tr> <th width="30%">類型:</th> <td width="70%"> <select class="selectpicker show-tick" id="SlideType"> <option value="2">生活</option> <option value="1">首頁(yè)</option> <option value="3">作品</option> </select> </td> </tr> <tr> <th >標(biāo)題:</th> <td> <div class="input-group" > <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)請(qǐng)求查詢不同的數(shù)據(jù),再在結(jié)果中搜索
下面說(shuō)的就是第二種,是搜索插件內(nèi)部的請(qǐng)求。
如下:
function GetSuggest(obj) { var testBsSuggest = $("#Title").bsSuggest({ url: "/Slide/LoadSelect?Keyword=" + obj + "", getDataMethod: "firstByUrl",//獲取數(shù)據(jù)的方式,url:一直從url請(qǐng)求;data:從 options.data 獲?。籪irstByUrl:第一次從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í)才請(qǐng)求數(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)); }); }
對(duì)應(yīng)的后臺(tái)代碼:
最終頁(yè)面顯示的結(jié)果。
看看以下配置說(shuō)明可以更改不同的需求。
####方法調(diào)用 禁用提示: $("input#test").bsSuggest("disable"); 啟用提示: $("input#test").bsSuggest("enable"); 銷毀插件: $("input#test").bsSuggest("destroy"); 查看版本:$("input#test").bsSuggest("version"); ####事件監(jiān)聽(tīng) onDataRequestSuccess: 當(dāng) AJAX 請(qǐng)求數(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, //請(qǐng)求數(shù)據(jù)的 URL 地址 jsonp: null, //設(shè)置此參數(shù)名,將開(kāi)啟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)先級(jí)高于 indexId 設(shè)置(推薦) keyField: '', //每組數(shù)據(jù)的哪個(gè)字段作為輸入框內(nèi)容,優(yōu)先級(jí)高于 indexKey 設(shè)置(推薦) /* 搜索相關(guān) */ autoSelect: true, //鍵盤(pán)向上/下方向鍵時(shí),是否自動(dòng)選擇值 allowNoKeyword: true, //是否允許無(wú)關(guān)鍵字時(shí)請(qǐng)求數(shù)據(jù) getDataMethod: 'firstByUrl', //獲取數(shù)據(jù)的方式,url:一直從url請(qǐng)求;data:從 options.data 獲取;firstByUrl:第一次從Url獲取全部數(shù)據(jù),之后從options.data獲取 delayUntilKeyup: false, //獲取數(shù)據(jù)的方式 為 firstByUrl 時(shí),是否延遲到有輸入時(shí)才請(qǐng)求數(shù)據(jù) ignorecase: false, //前端搜索匹配時(shí),是否忽略大小寫(xiě) effectiveFields: [], //有效顯示于列表中的字段,非有效字段都會(huì)過(guò)濾,默認(rèn)全部。 effectiveFieldsAlias: {}, //有效字段的別名對(duì)象,用于 header 的顯示 searchFields: [], //有效搜索字段,從前端搜索過(guò)濾數(shù)據(jù)時(shí)使用,但不一定顯示在列表中。effectiveFields 配置字段也會(huì)用于搜索過(guò)濾 twoWayMatch: true, // 是否雙向匹配搜索。為 true 即輸入關(guān)鍵字包含或包含于匹配字段均認(rèn)為匹配成功,為 false 則輸入關(guān)鍵字包含于匹配字段認(rèn)為匹配成功 multiWord: false, //以分隔符號(hào)分割的多關(guān)鍵字支持 separator: ',', //多關(guān)鍵字支持時(shí)的分隔符,默認(rèn)為半角逗號(hào) /* UI */ autoDropup: false, //選擇菜單是否自動(dòng)判斷向上展開(kāi)。設(shè)為 true,則當(dāng)下拉菜單高度超過(guò)窗體,且向上方向不會(huì)被窗體覆蓋,則選擇菜單向上彈出 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', //提示列表對(duì)齊位置,left/right/auto listHoverStyle: 'background: #07d; color:#fff', //提示框列表鼠標(biāo)懸浮的樣式 listHoverCSS: 'jhover', //提示框列表鼠標(biāo)懸浮的樣式名稱 clearable: false, // 是否可清除已輸入的內(nèi)容 /* key */ keyLeft: 37, //向左方向鍵,不同的操作系統(tǒng)可能會(huì)有差別,則自行定義 keyUp: 38, //向上方向鍵 keyRight: 39, //向右方向鍵 keyDown: 40, //向下方向鍵 keyEnter: 13, //回車(chē)鍵 /* methods */ fnProcessData: processData, //格式化數(shù)據(jù)的方法,返回?cái)?shù)據(jù)格式參考 data 參數(shù) fnGetData: getData, //獲取數(shù)據(jù)的方法,無(wú)特殊需求一般不作設(shè)置 fnAdjustAjaxParam: null, //調(diào)整 ajax 請(qǐng)求參數(shù)方法,用于更多的請(qǐng)求配置需求。如對(duì)請(qǐng)求關(guān)鍵字作進(jìn)一步處理、修改超時(shí)時(shí)間等 fnPreprocessKeyword: null //搜索過(guò)濾數(shù)據(jù)前,對(duì)輸入關(guān)鍵字作進(jìn)一步處理方法。注意,應(yīng)返回字符串 };
至此結(jié)束。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。