問題背景

最近小伙伴提了一個希望提高后臺下拉列表可操作性的需求，原因是下拉列表選項過多，每次下拉選擇比較費(fèi)時費(fèi)力且容易出錯，硬著頭皮啃了啃前端知識，網(wǎng)上搜尋了一些下拉列表實現(xiàn)的資料，這里總結(jié)一下。
PS: 以下所有代碼實現(xiàn)效果截圖均為chrome瀏覽器下效果，其他瀏覽器效果可能有一定差別，比如datalist在firefox和chrome下就有較明顯差別，這不是本文重點這里不做討論。

武平網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),武平網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為武平1000+提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢，請找那個售后服務(wù)好的武平做網(wǎng)站的公司定做！

最簡單的下拉列表實現(xiàn)

在HTML中傳統(tǒng)顯示下拉框的方法是使用select+option標(biāo)簽組合實現(xiàn)：

  張三
  李四
  王五
  黃六
  錢七

顯示效果如下:

當(dāng)選項較少的時候，此種下拉列表自然夠用了，然而當(dāng)選項特別多(比如超過100個)的時候，用戶要從其中選擇特定項可能需要從頭拉到尾，還需要肉眼match，不但工作量巨大，而且容易出錯，于是自然出現(xiàn)了可編輯+自動匹配的下拉列表類型的需求。

最簡單的可編輯下拉列表實現(xiàn)

H5標(biāo)準(zhǔn)中新提出了一個datalist標(biāo)簽，使用datalist+input可很簡單地實現(xiàn)可編輯、智能匹配的下拉框:

選擇顯示效果如下:

此下拉框支持人工輸入內(nèi)容，并且會根據(jù)已輸入部分自動更新可匹配選項列表，直接使用input+datalist標(biāo)簽實現(xiàn)，簡單易懂無需額外js邏輯代碼，單從使用上已可謂接近完美。
然而美中不足的是，選中option后，在輸入框中默認(rèn)顯示的就是option.value 的值，而非其對應(yīng)innerText，這對于value與innerText取值不一樣的場景，極大地降低了選項的可讀性，如下：選擇王五之后，輸入框只顯示了12這個value，而沒有顯示王五這個innerText內(nèi)容:

可編輯且默認(rèn)顯示option.innerText的下拉列表實現(xiàn)

為了解決上面提到的input默認(rèn)顯示option.value而非option.innerText的問題，找遍網(wǎng)上資料，目前發(fā)現(xiàn)暫時還是只能通過額外添加一些js代碼邏輯來解決，其基本思想是使用兩個input輸入框，一個負(fù)責(zé)顯示選項，另外一個負(fù)責(zé)實際的value存儲(Show datalist labels but submit the actual value)，用戶網(wǎng)頁實際只能看到負(fù)責(zé)顯示的input，而存儲實際value的input設(shè)置為type="hidden"隱藏掉，只有提交表單時會默默地提交到后端。
參考stackoverflow中Stephan Muller和cobbystreet兩位答主的答案，一個能區(qū)分不同value具有相同innerText內(nèi)容選項的代碼實現(xiàn)如下：

實現(xiàn)效果如下：

選定后效果:

轉(zhuǎn)載請注明出處，原文地址：https://www.cnblogs.com/AcAc-t/p/readable_editable_dropdown_list_by_input_datalist.html

參考:

Show datalist labels but submit the actual value: https://stackoverflow.com/questions//show-datalist-labels-but-submit-the-actual-value