一、什麼是datalistHTML如下(紅色區域即是我們的關注點):在Chrome下的顯示效果Chrome下datalist的效果截圖FireFox下的顯示效果在FireFox瀏覽器下,option的label值與value值只能顯示一個,詭異的是label值優先顯示——label值為空或預設時才顯示value值。也就是在FireFox瀏覽器下,上程式碼雙擊後的顯示是:firefox瀏覽器下label值優先顯示示意demo頁面中看到的不是這樣,是因為使用了JS清空了了所有option的label值。FireFox瀏覽器label值為空後的顯示瀏覽器支援經測試,Opera,Chrome,IE10, FireFox瀏覽器都是支援HTML5 datalist自定義列表的。二、datalist與動態郵件地址提示下邊是一些瀏覽器的截圖,大家好好觀摩觀摩(截自window 7):FireFox下datalist下動態郵箱地址效果圖 Chrome下datalist下動態郵箱地址效果圖Opera下datalist下動態郵箱地址效果圖 IE10下datalist下動態郵箱地址效果圖 不錯吧,是不是有那麼點發現新大陸的感覺。Chrome僅有的缺陷Chrome瀏覽器在互動上,幾乎無懈可擊,就是我們要的效果:內容輸入,列表顯示,鍵盤/滑鼠選擇,賦值,列表隱藏,用一句洋文稱讚下就是 – perfect!但是,一番嘗試,還是找到了瑕疵,如下截圖:Chrome瀏覽器下的瑕疵截圖示意出現在輸入一些字元,刪除,列表寬度與文字框寬度要一致的時候。FireFox的缺陷分析1. 閃瞎眼睛輸入框輸入內容的時候,浮動的下拉框更新的時候尼瑪閃個不停,體驗很不好,其他瀏覽器都很自然顯示與匹配,相信這個問題再後續版本肯定會改進的。閃動會級聯另外一個問題,當文字框設定了autofocus的時候,頁面載入的時候,會瞬間呈現醜陋的原始列表內容(*@qq.com...),阻礙的技術實現的靈活性(不能使用autofocus或原始列表只能是(@qq.com...))。2. 不肯消失的列表在Chrome下,我們點選列表項,文字框會複製,列表會隱藏。但是,在FireFox瀏覽器下,列表不會隱藏,這是糟糕的細節。原因何在?demo上的解釋很拗口,打個通俗點的比方:FireFox好比個性感的狐狸精,摸一下她的屁股(datalistHTML變化),她屁股會翹一下(datalist出現)。我們想踹她的屁股讓她不要翹(選擇一個datalist項),結果她以為我們又摸她屁股,屁股又擡起來了(datalist又出現)……於是,屁股永遠翹著!除非我們踹她的床啊被子什麼的(點選頁面空白是失去焦點),屁股才會下去(datalist隱藏)。然而,demo上卻沒有問題,是因為demo做個相關的優化,會匹配輸入內容以決定是否要踹火狐的“屁股”。IE10和Opera很相似IE10和Opera的呈現與互動很相似。其datalist在動態呈現上有個致命的不足:滯後性!具體描述就是:動態列表地址比輸入框中內容慢1拍。於是,一直到輸入字元@時列表才會呈現;刪除的時候永遠會呈現,但永遠少一個字元。IE10以及Opera滯後一個字元 張鑫旭-鑫空間-鑫生活我並未想到什麼好的解決方法,求指點。不過,個人覺得,影響可以接受,畢竟,使用者郵箱輸入的多。我們來看下是如何實現的實現的思路很簡單,預設如下格式HTML:郵箱:其中*為佔位符,當文字框輸入內容的時候,*替換成郵箱地址的前半部分,於是,動態郵件地址提示的效果就實現了。例如,當文字框輸入了iam的時候,datalist相關HTML變成了:並匹配呈現出來了。三、IE6~9的bug如何解決呢?真是個棘手的問題對於IE6~9瀏覽器,如何以最小的成本實現類似的效果呢?datalist中的option選項元素讓我想起了select控制元件,是不是可以嘗試在select上找到出路呢——即IE6~9使用select代替datalist實現類似效果?OK,稍等,我做個demo看看可行性和最後的效果如何……先看看一些效果截圖吧(window 7):ietester ie6下select下拉模擬截圖ietester ie8select模擬動態下拉截圖IE10向下IE7模式下的效果圖IE9瀏覽器自以為是忽略不認識的datalist中的option選項們,因此,在本demo,通過datalist獲取資料的方法在IE9瀏覽器下木有效果。但是,從可行性上講,我們可以通過其他更好的方式支援。低版本IE瀏覽器上的列表為傳統的select下拉列表,通過設定size值賦予不同平時的下拉框UI。本質上將,select下拉以及datalist下拉都屬於瀏覽器自帶的下拉列表,因此,其有相通之處,例如,選中背景色、邊框等是無法修改的;寬度都自適應於列表內容的(地址長,寬度自動變長);選中的值可以使用value表示等。不同之處也有,select下拉需要額外繫結鍵盤事件(上下鍵、回車)、點選選擇以及稍微棘手的動態匹配,不過因為是select下拉框,處理的細節比ul > li的模擬要簡單多了(例如,元素選中,直接設定當前option的selected就可以了,不要管什麼選中元素切換以及背景色修改什麼的)。技術細節什麼的估計大家都沒興趣,隻字不提,您有興趣,可以去demo瞅瞅。IE6~IE9動態下拉的折騰讓我確定了,IE6~9可以實現“神似”IE10以及其他現代瀏覽器datalist效果前者select > option, 後者datalist > option. 下面要做的事情就很清楚了,將上面的研究折騰做一番總結,寫個簡單的公用方法,完美收工!四、datalist下的動態郵箱地址公共方法啪啪啪,數個小時(帶測試),噹噹噹當,新鮮的方法出爐了——datalist-mail.js方法名為:fnDatalistMail.使用方法:fnDatalistMail(eleEmail, options); eleEmail表示郵件輸入框DOM啦~ options引數可選,目前僅一個可選屬性”email“, 表示哪些郵箱,預設值為:["qq.com", "163.com", "gmail.com", "yahoo.com.cn", "126.com"]. 實際使用不一定就是這些,您可以自己設定。例如demo頁面直接下面一段就實現效果了,沒有任何額外CSS支援:fnDatalistMail(document.getElementById("email"));fnDatalistMail方法不依賴任何JavaScript框架,你可以自由使用。忘記demo頁面了,您可以狠狠地點選這裡:公共方法下的動態郵件地址demo這回IE9瀏覽器就乖了~IE9瀏覽器下的效果 張鑫旭-鑫空間-鑫生活五、實際應用的硬傷功能都實現了,相容性也沒問題,效能也不錯。但是,datalist/selectlist有個致命的硬傷——UI!顯然,在面向廣大普通使用者的網站,一般網站是沒有這個氣量把datalist/selectlist生成的預設的略顯簡陋的列表(尤其IE)呈現給使用者的,至少,挑剔的設計師是不能忍受的。從而導致一個幽默的妹子因為長得很幽默而沒能被高富帥青睞。據我所知,目前來看,datalist是不能隨便定義樣式的,因此,長相阻礙了datalist的實際應用。不過,對於一些更強調功能或特定使用者群體的網站/專案而言,這個東西到是可以試試哦!比方說公司的內網,我就有可能會在登入頁面加上這個。邊學邊寫,錯誤難免;歡迎留言,歡迎指點。六、更新與2013-04-02回到現實,為了實際專案,還是使用傳統的方法,今天下午抽了點時間寫了個郵件列表下拉提示的jQuery外掛。您可以狠狠地點選這裡:jquery.mailAutoComplete-4.0.jsdemo頁面狠狠地點選這裡:郵箱自動下拉匹配外掛demo使用方法$().mailAutoComplete(options);options可選引數,支援引數有:className 列表外部ul容器的類名,用來控制樣式,預設是”emailist“.email 下拉陣列。預設值是:["qq.com","gmail.com",...,"sohu.com","sina.com"]zIndex 下拉列表的層級支援多個input框。 原作者： 和清科技