由於在優化專案中，發現先前寫的乙個活化石級的的可搜尋下拉功能在高速搜尋中會出現卡頓現象
1.起初的解決方法是在搜尋事件中加入防抖函式隔一段時間才去觸發他，同時搜尋的不再是html文件片段，而是直接對資料做篩選，再次放入搜尋的下拉容器內
>可搜尋下拉
title
>
head
>
<
body
>
<
input
type
="search"
class
="search"
id="city"
placeholder
="輸入省會或直轄市名稱"
/>
<
label
class
="datalist"
for="city"
>
//搜尋下拉容器
label
>
<
script
>
var testsearchdata = [
...];
//資料處理函式
function datas(search)
`);
}
}return htmls ;
}
//防抖函式function debounce(fn) , 300)};}
//初始化資料填充$('#city').keyup(function())
})
//之後的選擇事件省略.....ps：自由發揮 ，這段只是思維示例** **可進一步優化
script
>
body
>
html
>
2.後來在閱讀張鑫旭大大的部落格時無意發現了鑫大寫的一篇利用css屬性利用障眼法來做可搜尋下拉，相比純js來控制顯示隱藏效能提公升不少
>可搜尋下拉
title
>
head
>
<
body
>
<
input
type
="search"
class
="search"
id="city"
placeholder
="輸入省會或直轄市名稱"
/>
<
label
class
="datalist"
for="city"
>
<
div
class
="list"
data-index
="重慶市chongqing"
>重慶市
div>
<
div
class
="list"
data-index
="哈爾濱市haerbing"
>哈爾濱市
div>
<
div
class
="list"
data-index
="長春市changchun"
>長春市
div>
<
div
class
="list"
data-index
="蘭州市lanzhou"
>蘭州市
div>
<
div
class
="list"
data-index
="北京市beijing"
>北京市
div>
<
div
class
="list"
data-index
="杭州市hangzhou"
>杭州市
div>
<
div
class
="list"
data-index
="長沙市changsha"
>長沙市
div>
<
div
class
="list"
data-index
="瀋陽市shenyang"
>瀋陽市
div>
<
div
class
="list"
data-index
="成都市chengdu"
>成都市
div>
label
>
<
script
>
varelestyle
=document.createelement(
"style"),
eleinput
=document.queryselector(
"#city");
//用來css控制的style插入
document.queryselector(
"head
"
//文字框輸入
eleinput.addeventlistener(
"input",
function
() '
; }
else
});script
>
body
>
html
>
3.還一種個人認為對效能十分不友好就闡述下大概思路
1.對於前後端不分離專案例如 php 的tp框架將下拉內容直接volist出來
2.我們可通過js控制每個屬性的顯示隱藏，通過內聯css，將其dispaly:none; ps:因這裡需要大量遍歷讀寫dom 個人覺得對效能損耗比較大（不推薦）
事件冒泡 仿select下拉框
要求 點選按鈕時，下拉框顯示 點選頁面其他部分時，下拉框消失 1 doctype html 2 html 3 head lang en 4 meta charset utf 8 5 title title 6 style 7 div1 13style 14 script 15window.onloa...
實現select下拉框readonly
最近在專案裡面有乙個編輯頁面,一部分人可以編輯,一部分人只能檢視,所以想實現只能檢視的人 不能修改,已辦的input和textarea 都有readonly屬性,但是select卻不行,在國內看了一些帖子的方案是 onbeforeactivate return false nf cus this.b...
Layui獲取select搜尋下拉框選中的值
小陳同學拿了一段 來問我說為什麼拿不到搜尋下拉框中選中的值，我也不知道為什麼拿不到，先貼上 再說。使用layui的搜尋下拉框 型別 請選擇型別 if list?list list as t selected selected layui.use form function 當沒有新增 lay sea...