原文地址 ; https://hnzzmsf.github.io/example/example_v4.html#select_search
formSelects停止維護, 已經遷移至xm-select
formSelects-v4.js 基於Layui的多選解決方案
1、閑談雜趣
2、交流學習
QQ號: 707200833 QQ群: 769620939
重要的事情說三遍, 看文檔, 看文檔, 看文檔, 文檔中很多都已經標注了, 文檔不清楚的話, 可以加群@群主
群主會在第一時間把代碼更新至 GitHub, 你可以前往 GitHub下載formSelects完整代碼, 以便於二次開發
重要的事情說三遍, 看文檔, 看文檔, 看文檔, 文檔中很多都已經標注了, 文檔不清楚的話, 可以加群@群主
群主會在第一時間把代碼更新至 GitHub, 你可以前往 GitHub下載formSelects完整代碼, 以便於二次開發
3、下載與使用
下載地址:
GitHub
使用文檔: GitHub Pages
使用方式:
使用文檔: GitHub Pages
使用方式:
//1.下載formSelects-v4
//然后引入formSelects.css
<link rel=
"stylesheet"
href=
"formSelects-v4.css"
/>
//2.模塊化使用
<script src=
"layui.js"
type=
"text/javascript"
charset=
"utf-8"
></script>
<script type=
"text/javascript"
>
//全局定義一次, 加載formSelects
layui.config({
base:
'../src/'
//此處路徑請自行處理, 可以使用絕對路徑
}).extend({
formSelects:
'formSelects-v4'
});
//加載模塊
layui.use([
'jquery'
,
'formSelects'
],
function
(){
var
formSelects = layui.formSelects;
});
</script>
//3.非模塊化使用
<script src=
"layui.all.js"
type=
"text/javascript"
charset=
"utf-8"
></script>
<script src=
"formSelects-v4.js"
type=
"text/javascript"
charset=
"utf-8"
></script>
<script type=
"text/javascript"
>
var
formSelects = layui.formSelects;
</script>
|
一個簡單的小例子
4、基本參數
| 屬性名 | 說明 | 示例 |
|---|---|---|
| xm-select | 多選核心, 標記不同的多選, 多選ID | xm-select="id" |
| xm-select-max | 多選最多選擇數量 | xm-select-max="3" |
| xm-select-skin | 皮膚 | xm-select-skin=" default | primary | normal | warm | danger " |
| xm-select-search | 本地搜索 & 遠程搜索 | xm-select-search, xm-select-search="/search", 值為空時已有條目過濾搜索, 有值時開啟遠程搜索 |
| xm-select-create | 條目不存在時創建, 標記性屬性 | xm-select-create |
| xm-select-direction | 下拉方向 | xm-select-direction="auto|up|down", 自動, 上, 下, 默認自動模式 |
| xm-select-radio | 單選模式 | xm-select-radio, 最多只能選擇一個 |
| xm-select-search-type | 搜索框的顯示位置 | xm-select-search-type="title" 在下拉選title部分顯示, xm-select-search-type="dl" 在選項的第二條顯示 |
| xm-select-show-count | 多選顯示的label數量 | xm-select-show-count="2", 超出后隱藏 |
5、基本方法
value
/**
* 1.獲取選中數據
*
* formSelects.value(ID, TYPE);
*
* @param ID xm-select的值
* @param TYPE all | val | valStr | name | nameStr
*/
var
formSelects = layui.formSelects;
formSelects.value(
'select1'
);
// [{"name":"上海","val":"2"},{"name":"深圳","val":"4"}]
formSelects.value(
'select1'
,
'all'
);
// [{"name":"上海","val":"2"},{"name":"深圳","val":"4"}]
formSelects.value(
'select1'
,
'val'
);
// ["2","4"]
formSelects.value(
'select1'
,
'valStr'
);
// 2,4
formSelects.value(
'select1'
,
'name'
);
// ["上海","深圳"]
formSelects.value(
'select1'
,
'nameStr'
);
// 上海,深圳
/**
* 2.設置select的選中值
*
* formSelects.value(ID, ARR);
*
* @param ID xm-select的值
* @param ARR value數組
*/
var
formSelects = layui.formSelects;
formSelects.value(
'select1'
, [2, 4]);
// 選中value為2和4的option → 上海,深圳
/**
* 3.追加或刪除select的選中值
*
* formSelects.value(ID, ARR, isAppend);
*
* @param ID xm-select的值
* @param ARR value數組
*/
var
formSelects = layui.formSelects;
formSelects.value(
'select1'
, [2, 4],
true
);
// 追加value為2和4的option, 如果該值已選中則跳過, 該值未選中則選中
formSelects.value(
'select1'
, [2, 4],
false
);
// 刪除value為2和4的option, 如果該值沒有選中則跳過, 該值被選中則取消選中
|
on
/**
* 1.監聽select的選中與取消
*
* formSelects.on(ID, Function);
*
* @param ID xm-select的值
* @param Function 自定義處理方法
* @param isEnd 是否獲取實時數據, true/false
*/
var
formSelects = layui.formSelects;
formSelects.on(
'select1'
,
function
(id, vals, val, isAdd, isDisabled){
//id: 點擊select的id
//vals: 當前select已選中的值
//val: 當前select點擊的值
//isAdd: 當前操作選中or取消
//isDisabled: 當前選項是否是disabled
//如果return false, 那么將取消本次操作
return
false
;
});
//以下兩種方式則配置所有的多選select
formSelects.on(
function
(id, vals, val, isAdd, isDisabled){
...
});
formSelects.on(
null
,
function
(id, vals, val, isAdd, isDisabled){
...
});
//4.0.0.0813版本之前, 受到了頗多的小伙伴吐槽, 此版本加上了獲取實時數據的方法
formSelects.on(
'select1'
,
function
(id, vals, val, isAdd, isDisabled){
//id: 點擊select的id
//vals: 當前select已選中的值
//val: 當前select點擊的值
//isAdd: 當前操作選中or取消
//isDisabled: 當前選項是否是disabled
},
true
);
|
maxTips
/**
* 1.多選select超出最大值的提示, 默認閃爍紅色邊框
*
* formSelects.maxTips(ID, Function);
*
* @param ID xm-select的值
* @param Function 自定義處理方法
*/
var
formSelects = layui.formSelects;
formSelects.maxTips(
'select1'
,
function
(id, vals, val, max){
//id: 點擊select的id
//vals: 當前select已選中的值
//val: 當前select點擊的值
//max: 當天多選最大值
alert(
"選超了..."
);
});
//以下兩種方式則配置所有的多選select
formSelects.maxTips(
function
(id, vals, val, max){
...
});
formSelects.maxTips(
null
,
function
(id, vals, val, max){
...
});
|
filter
/**
* 1.自定義本地搜索過濾方式, 默認匹配文本是否包含
*
* formSelects.filter(ID, Function);
*
* @param ID xm-select的值
* @param Function 自定義處理方法
*/
var
formSelects = layui.formSelects;
formSelects.filter(
'select1'
,
function
(id, inputVal, val, isDisabled){
//id: 點擊select的id
//inputVal: 當前input搜索框中的數值
//val: 格式: {"name":"上海","val":"2"}
//isDisabled: 當前options是否被禁用
//return true時該選項被過濾, 隱藏不顯示
return
true
;
});
//以下兩種方式則配置所有的多選select
formSelects.filter(
function
(id, inputVal, val, isDisabled){
...
});
formSelects.filter(
null
,
function
(id, inputVal, val, isDisabled){
...
});
|
config
/**
* 1.配置遠程搜索, 請求頭, 請求參數, 請求類型等
*
* formSelects.config(ID, Options, isJson);
*
* @param ID xm-select的值
* @param Options 配置項
* @param isJson 是否傳輸json數據, true將添加請求頭 Content-Type: application/json; charset=UTF-8
*/
var
formSelects = layui.formSelects;
formSelects.config(
'select1'
, {
type:
'get'
,
//請求方式: post, get, put, delete...
header: {},
//自定義請求頭
data: {},
//自定義除搜索內容外的其他數據
searchUrl:
''
,
//搜索地址, 默認使用xm-select-search的值, 此參數優先級高
searchName:
'keyword'
,
//自定義搜索內容的key值
searchVal:
''
,
//自定義搜索內容, 搜素一次后失效, 優先級高於搜索框中的值
keyName:
'name'
,
//自定義返回數據中name的key, 默認 name
keyVal:
'value'
,
//自定義返回數據中value的key, 默認 value
keySel:
'selected'
,
//自定義返回數據中selected的key, 默認 selected
keyDis:
'disabled'
,
//自定義返回數據中disabled的key, 默認 disabled
keyChildren:
'children'
,
//聯動多選自定義children
delay: 500,
//搜索延遲時間, 默認停止輸入500ms后開始搜索
direction:
'auto'
,
//多選下拉方向, auto|up|down
response: {
statusCode: 0,
//成功狀態碼
statusName:
'code'
,
//code key
msgName:
'msg'
,
//msg key
dataName:
'data'
//data key
},
success:
function
(id, url, searchVal, result){
//使用遠程方式的success回調
console.log(id);
//組件ID xm-select
console.log(url);
//URL
console.log(searchVal);
//搜索的value
console.log(result);
//返回的結果
},
error:
function
(id, url, searchVal, err){
//使用遠程方式的error回調
//同上
console.log(err);
//err對象
},
beforeSuccess:
function
(id, url, searchVal, result){
//success之前的回調, 干嘛呢? 處理數據的, 如果后台不想修改數據, 你也不想修改源碼, 那就用這種方式處理下數據結構吧
console.log(id);
//組件ID xm-select
console.log(url);
//URL
console.log(searchVal);
//搜索的value
console.log(result);
//返回的結果
return
result;
//必須return一個結果, 這個結果要符合對應的數據結構
},
beforeSearch:
function
(id, url, searchVal){
//搜索前調用此方法, return true將觸發搜索, 否則不觸發
if
(!searchVal){
//如果搜索內容為空,就不觸發搜索
return
false
;
}
return
true
;
},
clearInput:
false
,
//當有搜索內容時, 點擊選項是否清空搜索內容, 默認不清空
},
true
);
//以下兩種方式則配置所有的多選select
formSelects.config(
'select1'
, {
...
},
false
);
formSelects.config(
null
, {
...
},
false
);
|
render
/**
* 1.重新渲染, 如果已經是多選則重置為初始值, 如果是初始select則渲染為多選
* 2.支持渲染時候改變多個參數
*
* formSelects.render(ID);
*
* @param ID xm-select的值
*/
var
formSelects = layui.formSelects;
formSelects.render(
'select1'
, {
init: [
"1"
,
"2"
],
//默認值
skin:
"danger"
,
//多選皮膚
height:
"auto"
,
//是否固定高度, 38px | auto
radio:
false
,
//是否設置為單選模式
direction:
"auto"
,
create:
function
(id, name){
console.log(id);
//多選id
console.log(name);
//創建的標簽名稱
return
Date.now();
//返回該標簽對應的val
},
filter: fun...,
//同formSelects.filter
max: 3,
//多選最多選擇量
maxTips: fun...,
//同formSelects.maxTips
on: fun...,
//同formSelects.on
searchType:
"title"
,
//搜索框的位置
template:
function
(name, value, selected, disabled){
console.log(name);
//選項名
console.log(value);
//選項值
console.log(selected);
//是否被選中
console.log(disabled);
//是否被禁用
//例如: 反轉字符串
//return name.split('').reverse().join('');
return
name;
//返回一個html結構, 用於顯示選項
},
showCount: 0,
//多選的label數量, 0,負值,非數字則顯示全部
});
//以下方式則重新渲染所有的已存在多選
formSelects.render();
|
disabled
/**
* 1.禁用多選
*
* formSelects.disabled(ID);
*
* @param ID xm-select的值
*/
var
formSelects = layui.formSelects;
formSelects.disabled(
'select1'
);
//以下方式則禁用所有的已存在多選
formSelects.disabled();
|
undisabled
/**
* 1.啟用多選, 啟用被禁用的多選
*
* formSelects.undisabled(ID);
*
* @param ID xm-select的值
*/
var
formSelects = layui.formSelects;
formSelects.undisabled(
'select1'
);
//以下方式則啟用所有的已存在多選
formSelects.undisabled();
|
data
/**
* 1.多選數據賦值
*
* formSelects.data(ID, type, config);
*
* @param ID xm-select的值
* @param type 'local' | 'server', 本地數據或者遠程數據
* @param config 配置項
* arr 本地數據數組
* url 遠程數據鏈接
* keyword 遠程數據搜索內容, 其他附加數據可以使用 formSelects.config設置
* linkage 是否為聯動多選
* linkageWidth 聯動多選沒級寬度
*/
//以下代碼可以在console中運行測試, 結果查看基礎示例第一個
var
formSelects = layui.formSelects;
//local模式
formSelects.data(
'select1'
,
'local'
, {
arr: [
{
"name"
:
"分組-1"
,
"type"
:
"optgroup"
},
{
"name"
:
"北京"
,
"value"
: 1},
{
"name"
:
"上海"
,
"value"
: 2},
{
"name"
:
"分組-2"
,
"type"
:
"optgroup"
},
{
"name"
:
"廣州"
,
"value"
: 3},
{
"name"
:
"深圳"
,
"value"
: 4},
{
"name"
:
"天津"
,
"value"
: 5}
]
});
//server模式
formSelects.data(
'select1'
,
'server'
, {
keyword:
'水果'
});
//server返回數據與遠程搜索數據結構一致
{
"code"
:0,
"msg"
:
"success"
,
"data"
:[
{
"name"
:
"北京"
,
"value"
:1,
"selected"
:
""
,
"disabled"
:
""
},
{
"name"
:
"上海"
,
"value"
:2,
"selected"
:
""
,
"disabled"
:
""
},
{
"name"
:
"廣州"
,
"value"
:3,
"selected"
:
"selected"
,
"disabled"
:
""
},
{
"name"
:
"深圳"
,
"value"
:4,
"selected"
:
""
,
"disabled"
:
"disabled"
},
{
"name"
:
"天津"
,
"value"
:5,
"selected"
:
""
,
"disabled"
:
""
}
]
}
//當然你也可以偷懶, 返回如下結構
[
{
"name"
:
"北京"
,
"value"
:1,
"selected"
:
""
,
"disabled"
:
""
},
{
"name"
:
"上海"
,
"value"
:2,
"selected"
:
""
,
"disabled"
:
""
},
{
"name"
:
"廣州"
,
"value"
:3,
"selected"
:
"selected"
,
"disabled"
:
""
},
{
"name"
:
"深圳"
,
"value"
:4,
"selected"
:
""
,
"disabled"
:
"disabled"
},
{
"name"
:
"天津"
,
"value"
:5,
"selected"
:
""
,
"disabled"
:
""
}
]
/*************** 華麗的分割線 ***************/
//來一個樹狀結構的數據
formSelects.data(
'select15'
,
'local'
, {
arr: [
{name:
'北京'
, value: 1, xslkdf:
'123'
, children: [
{name:
'朝陽'
, value: 11},
{name:
'海淀'
, value: 12}
]},
{name:
'深圳'
, value: 2, children: [{name:
'龍崗'
, value: 21}]},
]
});
/*************** 華麗的分割線 ***************/
//聯動多選數據格式
//local, 注意 value值請保證唯一
formSelects.data(
'select15'
,
'local'
, {
arr: [
{
"name"
:
"北京"
,
"value"
: 1,
"children"
: [
{
"name"
:
"北京市1"
,
"value"
: 12,
"children"
: [
{
"name"
:
"朝陽區1"
,
"value"
: 13,
"children"
: []},
{
"name"
:
"朝陽區2"
,
"value"
: 14,
"children"
: []},
{
"name"
:
"朝陽區3"
,
"value"
: 15,
"children"
: []},
{
"name"
:
"朝陽區4"
,
"value"
: 16,
"children"
: []},
]},
{
"name"
:
"北京市2"
,
"value"
: 17,
"children"
: []},
{
"name"
:
"北京市3"
,
"value"
: 18,
"children"
: []},
{
"name"
:
"北京市4"
,
"value"
: 19,
"children"
: []},
]
},
{
"name"
:
"天津"
,
"value"
: 2,
"children"
: [
{
"name"
:
"天津市1"
,
"value"
: 51,
"children"
: []},
]
},
],
linkage:
true
//開啟聯動模式
});
//server
formSelects.data(
'select15'
,
'server'
, {
linkage:
true
,
linkageWidth: 130
//代表每一級別的寬度, 默認是100
});
//server返回數據, 同上 value不能重復
{
"code"
:0,
"msg"
:
"success"
,
"data"
:[
{
"name"
:
"北京"
,
"value"
: 1,
"children"
: [
{
"name"
:
"北京市1"
,
"value"
: 12,
"children"
: [
{
"name"
:
"朝陽區1"
,
"value"
: 13,
"children"
: []},
{
"name"
:
"朝陽區2"
,
"value"
: 14,
"children"
: []},
{
"name"
:
"朝陽區3"
,
"value"
: 15,
"children"
: []},
{
"name"
:
"朝陽區4"
,
"value"
: 16,
"children"
: []},
]},
{
"name"
:
"北京市2"
,
"value"
: 17,
"children"
: []},
{
"name"
:
"北京市3"
,
"value"
: 18,
"children"
: []},
{
"name"
:
"北京市4"
,
"value"
: 19,
"children"
: []},
]
},
{
"name"
:
"天津"
,
"value"
: 2,
"children"
: [
{
"name"
:
"天津市1"
,
"value"
: 51,
"children"
: []},
]
},
]
}
|
btns
/**
* 1.快捷操作
*
* formSelects.btns(ID, BTNS, config);
*
* @param ID xm-select的值
* @param BTNS 定義操作列表, 內置三種操作, select:全選, remove:清空, skin:換膚, 當然你可以自定義
* @param config 配置操作列表, config.show='name' 只顯示名稱, config.show='icon' 只顯示圖標, config.space='30px' 兩個操作之間的間隔
*/
var
formSelects = layui.formSelects;
//默認設置了 全選, 清空, 反選
//如下設置內置操作
formSelects.btns(
'select1'
, [
'select'
,
'remove'
,
'reverse'
]);
//如下設置自定義
formSelects.btns(
'select1'
, [
'select'
,
'remove'
,
'skin'
, {
icon:
'layui-icon layui-icon-ok'
,
//自定義圖標, 可以使用layui內置圖標
name:
'提示名稱'
,
click:
function
(id){
//點擊后的操作
alert(
'點擊了自定義快捷操作'
)
}
}]);
//配置只顯示名稱,緊湊型, 適合寬度較窄的情況
formSelects.btns(
'select1'
, [
'select'
,
'remove'
], {show:
'name'
, space:
'10px'
});
//如下寫法定義所有的多選
formSelects.btns([
'select'
,
'remove'
,
'skin'
]);
// !!友情提示: name不能重復
|
search
/**
* 1.觸發搜索
*
* formSelects.search(ID, val);
*
* @param ID xm-select的值
* @param BTNS 搜索內容
*/
var
formSelects = layui.formSelects;
//使用js主動觸發搜索
formSelects.search(
'select1'
,
'關鍵內容'
);
|
opened
/**
* 1.打開下拉框的回調事件
*
* formSelects.opened(ID);
*
* @param ID xm-select的值
*/
var
formSelects = layui.formSelects;
//監聽下拉框的打開
formSelects.opened(
'select1'
,
function
(id){
console.log(
'打開了'
);
});
//如下定義所有
formSelects.opened(
null
,
function
(id){
console.log(
'打開了'
);
});
formSelects.opened(
function
(id){
console.log(
'打開了'
);
});
|
closed
/**
* 1.關閉下拉框的回調事件
*
* formSelects.closed(ID);
*
* @param ID xm-select的值
*/
var
formSelects = layui.formSelects;
//監聽下拉框的關閉
formSelects.closed(
'select1'
,
function
(id){
console.log(
'合上了'
);
});
//如下定義所有
formSelects.closed(
null
,
function
(id){
console.log(
'合上了'
);
});
formSelects.closed(
function
(id){
console.log(
'合上了'
);
});
|
6、基礎示例
基礎多選
適用性較廣的基礎多選，用 Tag 展示已選項
上海
pane模式
layui pane模式
上海
分組多選
基於layui的分組多選
上海
自定義tips
寫一個空的option放在第一個
上海
多選上限
xm-select-max="3", 超過3個后, 默認閃爍紅框提示
上海
當然, 如果你初始化值就多於max值, 那是可以設置成功滴, 取消了就選不回來了
北京
多選皮膚
xm-select-skin="default"
上海
xm-select-skin="primary", 這個墨綠style已經被內置成為了經典皮膚, 只因他誕生於layui的經典顏色
上海
xm-select-skin="normal"
上海
xm-select-skin="warm"
上海
xm-select-skin="danger"
上海
本地搜索
xm-select-search, 搜索已存在的option
上海
分組中的搜索
上海
遠程搜索
xm-select-search="/search", 指定一個url, 將開啟遠程搜索模式
上海
遠程搜索response結構, 其中name, value可以自定義, 請查看method config
code為0時, 表示正常, 不為0時則提示msg信息
{
"code"
: 0,
"msg"
:
"success"
,
"data"
: [
{
"name"
:
"北京"
,
"value"
:1,
"selected"
:
""
,
"disabled"
:
""
},
{
"name"
:
"上海"
,
"value"
:2,
"selected"
:
""
,
"disabled"
:
""
},
{
"name"
:
"廣州"
,
"value"
:3,
"selected"
:
"selected"
,
"disabled"
:
""
},
{
"name"
:
"深圳"
,
"value"
:4,
"selected"
:
""
,
"disabled"
:
"disabled"
},
{
"name"
:
"天津"
,
"value"
:5,
"selected"
:
""
,
"disabled"
:
""
}
]
}
|
當然, 遠程搜索也是可以分組的
上海
{
"code"
: 0,
"msg"
:
"success"
,
"data"
: [
{
"name"
:
"分組-1"
,
"type"
:
"optgroup"
},
{
"name"
:
"北京"
,
"value"
:1,
"selected"
:
""
,
"disabled"
:
""
},
{
"name"
:
"上海"
,
"value"
:2,
"selected"
:
""
,
"disabled"
:
""
},
{
"name"
:
"分組-2"
,
"type"
:
"optgroup"
},
{
"name"
:
"廣州"
,
"value"
:3,
"selected"
:
"selected"
,
"disabled"
:
""
},
{
"name"
:
"深圳"
,
"value"
:4,
"selected"
:
""
,
"disabled"
:
"disabled"
},
{
"name"
:
"天津"
,
"value"
:5,
"selected"
:
""
,
"disabled"
:
""
}
]
}
|
創建條目
xm-select-create, 不存在時會創建, 選中后長久保留, value為Date.now()生成
上海
下拉方向
方式一: xm-select-direction="auto|up|down", 自動, 上, 下, 默認自動模式
方式二: 使用formSelects.config配置
//配置某一個多選的方向
layui.formSelects.config(
'select1'
, {direction:
'up'
});
//配置所有多選的方向
layui.formSelects.config({direction:
'up'
});
|
我是朝上的
上海
我是朝下的
上海
其他的都是自動處理的哈, 當然沒有朝左朝右的
我是一個動態的
上海
固定高度
xm-select-height="36px", 多選的高度是隨便選項的變化而變化的, 當然你也可以固定一個高度, 從此高度將不再變化
北京
禁用select
disabled="disabled", 多選的高度是隨便選項的變化而變化的, 當然你也可以固定一個高度, 從此高度將不再變化
廣州
動態操作select的啟用與禁用
廣州
單選模式
xm-select-radio, 單選模式
杭州
表單操作
支持layui原生表單驗證, lay-verify="xxx"
tips模式, lay-verify="required", lay-verType="tips"
支持表單提交自動賦值, 只需要在select加上name屬性即可, 點擊提交可查看url的變化
支持reset操作, 選擇幾項數據, 然后點擊重置
多選聯動
多選聯動, 聯動需要使用data來賦值, 先給一個空select標記多選, 記得value不能重復哦
多選聯動, 使用遠程數據實現省市區三級聯動
寬度是可以自定義的, linkageWidth: 130, 默認100
快捷操作
設置內置的快捷操作
廣州
自定義快捷操作
廣州
你是可以換數組位置, 更換顯示位置滴
如果內置操作不滿意, 完全可以自定義
廣州
如果不需要快捷操作, 設置一個空數組就可以了, 它會變回以前的模樣
廣州
只顯示圖標
只顯示名稱
顯示圖標+名稱, 但是是緊湊型的
7、進階示例
監聽select選擇
適用於動態操作
選擇[北京]時, 會發現選不上哦
獲取實時數據
賦值與取值
多選取值
北京
多選賦值
北京
超選后的提示
如果設置了xm-select-max="3", 當你選擇第四個的時候會默認閃爍紅框提示, 當然這個提示你可以自定義
深圳
自定義搜索
如果設置了xm-select-search="", 當你搜索的時候是默認判斷選項文本是否包含搜索的值
如下是檢測 全拼,簡拼,文本是否包含, 其中漢字轉拼音摘錄於網絡
可以嘗試使用拼音進行搜索
友情提示: 遠程搜索是不會經過此方法滴
配置
說起來這是個又愛又恨的方法, 設計之初是准備專門配置遠程搜索用的, 無奈后面增加了很多東西, 結果變成了專門的配置方法了
好像沒啥好說的, 都是點兒配置的東西, 說點兒場景吧
- 默認本地數據, js動態配置成遠程搜索, 首先開啟搜索模式 xm-select-search="", 然后config中定義url, 適用於url為可變參數的情況下
- 點擊加載
- beforeSuccess的用法
當然上面的處理方法是用於演示beforeSuccess的用法的, 正確的姿勢應該是轉換數據結構滴
success, error可以直接打開控制台, 查看console的打印記錄
遠程數據的賦值
遠程數據是使用ajax異步的模式來獲取的, 所以賦值不能直接在config之后
方式一: 在返回數據中包含selected屬性
方式二: 在success回調中使用value進行賦值
上面好像不太對
動態數據
本地數據
遠程數據, 也許你只希望加載一次, 而不是搜索一次變一次, 這個更適合你
不知道你們為什么吐槽我的設計, 也許真的是不好, 新增如下寫法
來一發樹狀結構壓壓驚
搜索控制
當輸入內容為空時不觸發搜索
主動觸發搜索
顯示數量
默認顯示全部, 如果設置了高度的話就是顯示指定范圍內的label, 當然你也可以控制顯示的數量
xm-select-show-count="2", 最多顯示2個, 多余的隱藏
北京
<div class=
"layui-form"
>
<select name=
"city"
xm-select=
"example8_1"
xm-select-show-count=
"2"
>
<option value=
"1"
>北京</option>
<option value=
"2"
>上海</option>
<option value=
"3"
>廣州</option>
<option value=
"4"
>深圳</option>
<option value=
"5"
>天津</option>
<option value=
"6"
>鄭州</option>
<option value=
"7"
>合肥</option>
<option value=
"8"
>邯鄲</option>
<option value=
"9"
>舟山</option>
<option value=
"10"
>海南</option>
<option value=
"11"
>南京</option>
<option value=
"12"
>哈爾濱</option>
</select>
</div>
|
自定義模板
選項默認是顯示的孤零零的name值, 你也可以自定義格式
比如來一個左邊name, 右邊拼音的
搜索位置
默認是在title上的, 可以設置到選項中, 前提是你打開了搜索
xm-select-search-type="dl"
樹狀結構
驚喜有沒有, 樹狀結構來一發
監聽打開關閉
監聽下拉選框的打開與關閉
結尾
↓↓↓ 捐贈作者 ↓↓↓
你們的支持, 是我們堅持的動力
[2019-06-24] v4.x
-- 修復 --
1. 修復文檔中因為https無法訪問http接口的問題, 從 http:
//yapi.demo.qunar.com 更換為 https://www.fastmock.site
2. 一個簡單的手段, 讓樹狀結構能夠收起來
3. 修改template中文檔寫法錯誤
其實天下沒有不散的宴席, 目前來看 jQuery 已經成為了歷史, 加油吧, 小伙伴, 努力向最新的技術看齊~~~
|