日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
HTML5DataList入門教程

在Web設(shè)計中,經(jīng)常會用到如輸入框的自動下拉提示,這將大大方便用戶的輸入。比如在Google中進(jìn)行搜索的時候，就會出現(xiàn)下拉的智能提示列表選擇框。這樣的下拉列表框稱為AutoComplete。在以前，如果要實(shí)現(xiàn)這樣的功能，必須要求開發(fā)者使用一些Javascript的技巧或相關(guān)的框架進(jìn)行ajax調(diào)用，需要一定的編程工作量。但隨著HTML　5 的慢慢普及，開發(fā)者可以使用其中的新的DataList標(biāo)記就能快速開發(fā)出十分漂亮的 AutoComplete組件的效果。本文將以實(shí)例的方式講解HTML 5中DataList的使用和要注意的事項。

成都創(chuàng)新互聯(lián)公司，為您提供成都網(wǎng)站建設(shè)公司、成都網(wǎng)站制作、網(wǎng)站營銷推廣、網(wǎng)站開發(fā)設(shè)計，對服務(wù)混凝土泵車等多個行業(yè)擁有豐富的網(wǎng)站建設(shè)及推廣經(jīng)驗(yàn)。成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)公司成立于2013年,提供專業(yè)網(wǎng)站制作報價服務(wù),我們深知市場的競爭激烈，認(rèn)真對待每位客戶，為客戶提供賞心悅目的作品。 與客戶共同發(fā)展進(jìn)步，是我們永遠(yuǎn)的責(zé)任！

創(chuàng)建DataList

    首先，我們看下傳統(tǒng)的簡單文本輸入框是什么樣子的，如下代碼所示：

 
 
 
 
    
  
  
  
  
  1. Favorite Team: 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.

這個輸入框中，用戶必須手動在其中輸入文字內(nèi)容，并沒有提示，而如果使用了HTML5 中的DataList,則可以允許用戶從下拉列表中選擇。一個最簡單的DataList使用如下方式聲明：

 
 
 
 
    
  
  
  
  
  1. 　 
    2.   
  
  
  
  2.    
    3.   
  
  
  
  3.    
    4.   
  
  
  
  4.    
    5.   
  
  
  
  5.    
    6.   
  
  
  
  6.    
    7.   
  
  
  
  7.  
    8.

在標(biāo)簽中所包裹的就是可供用戶選擇的項了。
　　　那么，如何將datalist和文本框進(jìn)行綁定呢？使用如下的代碼：

 
 
 
 
    
  
  
  
  
  1. Favorite Team: 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.    
    5.   
  
  
  
  5.    
    6.   
  
  
  
  6.    
    7.   
  
  
  
  7.    
    8.   
  
  
  
  8.   
    9.

在上面的代碼中，為文本輸入框inputbox指定list屬性，其值一定要和中的id值相匹配。
在各瀏覽器中運(yùn)行上面的代碼，馬上可以看到效果了，如下圖：

在上圖中，左上角的圖為IE 10中的效果，右上角圖為Firefox 18中的效果，左下角圖為Chrome 24中的效果，右下角圖為Opera 12的效果。
要注意的是IE 10和Opera 中，不需要用戶必須輸入一個字符才看到下拉的建議列表，而其他瀏覽器需要用戶至少輸入一個字符才能看到效果。
在Datlist中，同樣可以為每一個下拉列表選項指定一個value值，如下代碼：

 
 
 
 
    
  
  
  
  
  1. label for="state">State: 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.   Alabama 
    5.   
  
  
  
  5.   Alaska 
    6.   
  
  
  
  6.   Arizona 
    7.   
  
  
  
  7.   Arkansas 
    8.   
  
  
  
  8.  
    9.

如果在option中一旦指定了value的值，則用戶通過下拉列表選擇后，文本框中顯示的將會是value的值，如下圖：

Autocomplete屬性

下面講解autocomplete屬性。該屬性可以設(shè)置為on或off，表示輸入字段是否應(yīng)該啟用自動完成功能，如下代碼所示：

 
 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.    
    3.   
  
  
  
  3.    
    4.   
  
  
  
  4.    
    5.   
  
  
  
  5.    
    6.   
  
  
  
  6.    
    7.   
  
  
  
  7.    
    8.   
  
  
  
  8.  
    9.

要注意的是，在opera瀏覽器中，如果設(shè)置autocomplete為off，則根本不顯示datalist,而在其他瀏覽器中，是會顯示datalist的，只不過失去自動建議提醒功能。

其他輸入的屬性

接下來，我們學(xué)習(xí)下datalist中其他的輸入屬性。在datalist的下拉列表提示框中，還可以支持其他類型的HTML 5標(biāo)簽，比如下面的代碼，展示的是一個HTML 5的滑動數(shù)字條，在運(yùn)行后，當(dāng)鼠標(biāo)每向右滑動時，會有對應(yīng)的文字提示： 

 
 
 
 
    
  
  
  
  
  1. label for="donation">Donation Amount (USD): 
    2.   
  
  
  
  2.   
  
  
  
  3.   step="5" min="5" max="200"> 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.    
    6.   
  
  
  
  6.    
    7.   
  
  
  
  7.    
    8.   
  
  
  
  8.    
    9.   
  
  
  
  9.  
    10.

#p#

下圖是分別在Chrome 24和IE 10的效果圖：


　　
　　

　

可惜的是，目前只有Chrome和IE 10支持datalist中使用range范圍控件的做法。下面的這個表，很清晰說明了在各個瀏覽器中datalist和其他HTML 5控件搭配的情況：

什么時候該使用DataList?

   要注意的是，使用這種下拉的智能提示框也要注意場合。比如在一些要選擇不是太多的場景下，使用一般的下拉框其實(shí)就可以了。而如果在需要用戶在很多數(shù)據(jù)中去選擇，則可以建議使用Datalist下拉建議提示框，因?yàn)榭梢苑奖阌脩艨焖贆z索去選擇。一個典型的場景就是對世界各個國家的選擇，如下代碼：

 
 
 
 
    
  
  
  
  
  1. Country:  
    2.   
  
  
  
  2.   
    3.   
  
  
  
  3.   
    4.   
  
  
  
  4.   Afghanistan  
    5.   
  
  
  
  5.   ?land Islands  
    6.   
  
  
  
  6.   Albania  
    7.   
  
  
  
  7.   Algeria  
    8.   
  
  
  
  8.     
    9.   
  
  
  
  9.   
    10.

限制datalist選擇的值

有的場景下,我們要限制用戶在下拉自動提示列表中所選擇的值,而在IE 10中,有一系列專門為此新加入的API,具體可以參考:

http://msdn.microsoft.com/en-us/library/ie/hh673544(v=vs.85).aspx#dom_methods_input_val,下面的代碼是一個使用的例子：

 
 
 
 
    
  
  
  
  
  1. / 找出所有綁定了datalist的input文本框 
    2.   
  
  
  
  2. var inputs = document.querySelectorAll('input[list]'); 
    3.   
  
  
  
  3. for (var i = 0; i < inputs.length; i++) { 
    4.   
  
  
  
  4.   //當(dāng)輸入文本框的值發(fā)生改變 
    5.   
  
  
  
  5.   inputs[i].addEventListener('change', function() { 
    6.   
  
  
  
  6.     var optionFound = false, 
    7.   
  
  
  
  7.       datalist = this.list; 
    8.   
  
  
  
  8. //判斷用戶的輸入是否存在于datalist的下拉列表框的數(shù)據(jù)項中 
    9.   
  
  
  
  9.     for (var j = 0; j < datalist.options.length; j++) { 
    10.   
  
  
  
  10.         if (this.value == datalist.options[j].value) { 
    11.   
  
  
  
  11.             optionFound = true; 
    12.   
  
  
  
  12.             break; 
    13.   
  
  
  
  13.         } 
    14.   
  
  
  
  14.     } 
    15.   
  
  
  
  15.    
    16.   
  
  
  
  16. 使用IE 10的Validation API中的setCustomValidity方法對是否存在合法的輸入值進(jìn)行前端的響應(yīng)展示 
    17.   
  
  
  
  17.     if (optionFound) { 
    18.   
  
  
  
  18.       this.setCustomValidity(''); 
    19.   
  
  
  
  19. } else { 
    20.   
  
  
  
  20. //如果用戶的輸入不在datalist列表中，前端顯示相關(guān)錯誤信息 
    21.   
  
  
  
  21.       this.setCustomValidity('Please select a valid value.'); 
    22.   
  
  
  
  22.     } 
    23.   
  
  
  
  23.   }); 
    24.   
  
  
  
  24. } 
    25.

 下圖是在IE 10下，當(dāng)用戶輸入的值不在下拉列表后，瀏覽器顯示的錯誤提示信息如下：

要注意的是，客戶端的這種驗(yàn)證不能取代服務(wù)端的驗(yàn)證，***的做法是依然在服務(wù)端進(jìn)行合法性的校驗(yàn)。而且要注意的是在舊的瀏覽器中，是缺乏這種對于datalist的校驗(yàn)支持的，除非開發(fā)者另外進(jìn)行編碼進(jìn)行校驗(yàn)。

如何應(yīng)對不支持的瀏覽器

在寫本文的時候，依然只有IE 10,Firefox 4+,Chrome 20+和Opera是支持datalist的，這意味著不少舊版本的瀏覽器的用戶不能使用datalist的功能，但辦法總是有的，下面分別介紹一些折衷的辦法

1）datalist中嵌套使用傳統(tǒng)的select下拉選擇框

    一個不錯的解決方法，是在提供傳統(tǒng)的select下拉文本框的同時，提供給用戶能輸入普通文本的文本框，如下代碼：

 
 
 
 
    
  
  
  
  
  1. Country:  
    2.   
  
  
  
  2.   
    3.   
  
  
  
  3.     
    4.   
  
  
  
  4.     Afghanistan  
    5.   
  
  
  
  5.     ?land Islands  
    6.   
  
  
  
  6.     Albania  
    7.   
  
  
  
  7.     Algeria  
    8.   
  
  
  
  8.     American Samoa  
    9.   
  
  
  
  9.       
    10.   
  
  
  
  10.     
    11.   
  
  
  
  11.   If other, please specify:  
    12.   
  
  
  
  12.   
    13.   
  
  
  
  13.   
    14.

#p#

運(yùn)行的效果為如下圖所示：  

在寫本文的時候，依然只有IE 10,Firefox 4+,Chrome 20+和Opera是支持datalist的，這意味著不少舊版本的瀏覽器的用戶不能使用datalist的功能，但辦法總是有的，下面分別介紹一些折衷的辦法：

1）datalist中嵌套使用傳統(tǒng)的select下拉選擇框

    一個不錯的解決方法，是在提供傳統(tǒng)的select下拉文本框的同時，提供給用戶能輸入普通文本的文本框，如下代碼：

 
 
 
 
    
  
  
  
  
  1. Country: 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.    
    4.   
  
  
  
  4.     Afghanistan 
    5.   
  
  
  
  5.     ?land Islands 
    6.   
  
  
  
  6.     Albania 
    7.   
  
  
  
  7.     Algeria 
    8.   
  
  
  
  8.     American Samoa 
    9.   
  
  
  
  9.      
    10.   
  
  
  
  10.    
    11.   
  
  
  
  11.   If other, please specify: 
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13.  
    14.  
 
 
 
 

 運(yùn)行的效果為如下圖所示：

 

意在上面的代碼中，在datalist中嵌套了傳統(tǒng)的select下拉文本框，而input文本框中依然綁定了datalist，這樣的好處是，當(dāng)在不支持datalist的瀏覽器中運(yùn)行的時候會有上圖的效果：一邊是下拉選擇，另外的是可以允許用戶輸入下拉列表中不存在的記錄。而上面的代碼如果在支持datalist的瀏覽器中運(yùn)行，則是原來的只顯示一個datalist的效果。

2）使用jquery ui中的autocomplete插件

    還有一種方法就是判斷當(dāng)用戶的瀏覽器是不支持datalist的話，則使用jquery ui中的autocomplete插件，代碼如下：

 
 
 
 
    
  
  
  
  
  1. if (Modernizr.input.list) {  
    2.   
  
  
  
  2. //如果返回值為true，則證明瀏覽器支持datalist  
    3.   
  
  
  
  3.   } else {  
    4.   
  
  
  
  4.     //瀏覽器不支持datalist  
    5.   
  
  
  
  5.   }  
    6.   
  
  
  
  6. }  
    7.

使用jquery ui中的autocomplete插件的原因之一是因?yàn)槠涔δ軓?qiáng)大和簡單易用，當(dāng)然讀者可以從下面的這個地址獲得更多的候選方案：https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills，里面提供了很多在其他瀏覽器中用其他方法實(shí)現(xiàn)同樣的HTML 5功能的方法。下面是具體的代碼：

 
 
 
 
    
  
  
  
  
  1. var datalist, 
    2.   
  
  
  
  2.   listAttribute, 
    3.   
  
  
  
  3.   options = []; 
    4.   
  
  
  
  4. if (!Modernizr.input.list) { 
    5.   
  
  
  
  5.   // 對每一個綁定datalist的輸入文本框循環(huán)遍歷 
    6.   
  
  
  
  6.   $('input[type="text"][list]').each(function() { 
    7.   
  
  
  
  7.     //找出對應(yīng)的datalist 
    8.   
  
  
  
  8.     listAttribute = $(this).attr('list'); 
    9.   
  
  
  
  9.     datalist = $('#' + listAttribute); 
    10.   
  
  
  
  10.    
    11.   
  
  
  
  11.     if (datalist.length > 0) { 
    12.   
  
  
  
  12.       options = []; 
    13.   
  
  
  
  13.   //將datalist中的option值復(fù)制到j(luò)query autocomplete控件中去     
    14.   
  
  
  
  14.       datalist.find('option').each(function() { 
    15.   
  
  
  
  15.         options.push({ label: this.innerHTML, value: this.value }); 
    16.   
  
  
  
  16.       }); 
    17.   
  
  
  
  17.     //將options和autocomplete控件重新綁定 
    18.   
  
  
  
  18.       $(this).autocomplete({ source: options }); 
    19.   
  
  
  
  19.     } 
    20.   
  
  
  
  20.   }); 
    21.   
  
  
  
  21.   // 移除所有的datalist不予以顯示 
    22.   
  
  
  
  22.   $('datalist').remove(); 
    23.   
  
  
  
  23. } 
    24.

 

上面代碼的核心，就是找出所有的datalist中的值，然后循環(huán)逐一復(fù)制到傳統(tǒng)的options數(shù)組中，然后將options和autocomplete控件重新綁定,，并不顯示datalist，這樣上面的代碼就既可以在支持datalist的瀏覽器中運(yùn)行，也可以在不支持datalist的瀏覽器中運(yùn)行。

   下圖是在Safari瀏覽器中運(yùn)行的效果圖：

在上面的圖中，可以看到，jquery autocomplete默認(rèn)是下拉列出和用戶輸入字符匹配的所有單詞，而原生的datalist只是列出首字母相同的單詞。因此如果需要改動的話，可以按如下代碼的方式，則可以讓jquery autocomplete達(dá)到相同的效果。

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.   
    3.

要注意的是，針對舊版本的IE 瀏覽器（IE 9及之前的）必須要求options標(biāo)簽是一定要位于select標(biāo)簽的子標(biāo)簽中，這個可以通過使用如下代碼的

條件注釋去解決這個問題（參考：http://msdn.microsoft.com/library/ms537512.aspx）

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.    
    3.   
  
  
  
  3.    
    4.   
  
  
  
  4.    
    5.   
  
  
  
  5.    
    6.   
  
  
  
  6.    
    7.   
  
  
  
  7.    
    8.   
  
  
  
  8.  
    9.

這樣，IE 9及以前的IE 瀏覽器則不會對以上的語法報錯了。

Datalist的限制

當(dāng)然，Datalist也有限制和不足之處，體現(xiàn)在：

1）不能使用CSS去隨意控制或改變其下拉建議列表中的項

 2）不能控制datalist的位置

 3) 不能控制每次當(dāng)用戶輸入多少個字符后，就出現(xiàn)下拉建議列表

 4）不能控制大小寫敏感，或當(dāng)匹配什么樣的字符就出現(xiàn)下拉建議列表

 5）不能將其與服務(wù)端的數(shù)據(jù)源綁定

   因此，目前來說，除非HTM L5關(guān)于datalist的相關(guān)標(biāo)準(zhǔn)有繼續(xù)修訂，或者各大瀏覽器廠商繼續(xù)去改進(jìn)，否則建議在實(shí)際的應(yīng)用中，依然使用如jQuery Autocomplete等類似的插件去實(shí)現(xiàn)該功能。


分享題目：HTML5DataList入門教程
標(biāo)題URL：http://www.dlmjj.cn/article/djohodg.html