使用HTML5數據師輕量級自動完成控件-css教學-PHP中文網

首頁

web前端

css教學

使用HTML5數據師輕量級自動完成控件

Jennifer Aniston

Feb 10, 2025 pm 03:18 PM

使用HTML5數據師輕量級自動完成控件

在本教程中，我們將深入了解少量使用的HTML5 元素。它可以實現不需要JavaScript的輕巧，易於訪問，跨瀏覽器自動完成的表單。

鑰匙要點

`元素為自動完整的表單控件提供了輕巧，易於訪問和跨瀏覽器解決方案，而無需依賴JavaScript。 > `，````````````'>```````'
`在包括Internet Explorer 10和11在內的現代瀏覽器中具有強大的功能，其中可用於舊瀏覽器的後備選項使用`>'和文本輸入的組合。 🎜> `元素不能直接用CSS來設計，該元素可以限制自定義，但可以確保在不同的瀏覽器和平台上保持一致性。
>諸如Ajax之類的增強功能可以與``>''>
控件是理想的選擇。它們在以下情況時不太實用：
有很多選擇，例如國家或職位標題

明顯的解決方案是自動完成控制。這允許用戶輸入幾個字符，該字符限制了可快速選擇的選項。 >

邊緣僅顯示值。

以下codepen示例顯示了所有變體：
>請參閱pen

sitepoint（@sitepoint）

上的自動完成示例。

實現將不斷發展，但目前，我建議您不要使用價值和標籤，因為它可能會使用戶混淆。

（下面討論了解決方法。）

>
瀏覽器支持和後備

元素在現代瀏覽器以及Internet Explorer 10和11中得到了很好的支持

>

有幾種實施說明，但不會影響大多數用法。最糟糕的情況是一個字段恢復為標准文本輸入。

如果您絕對必須支持IE9及以下，則有一個後備模式，該模式在失敗時使用標準>

請參閱pen
html5 sitepoint（@sitepoint）
上的自動完成後返回。

在現代瀏覽器中，元素成為的一部分，而”或其他標籤未顯示。它看起來與上面的示例相同，但是鄉村的形式值將設置為一個空字符串。在IE9及以下，（非常長的）盒子，
…您很容易！
可以將其視為正常的樣式，但是鏈接的及其子元素不能在CSS中進行樣式。列表渲染完全由平台和瀏覽器確定。

> 我希望這種情況能有所改善，但是目前，在MDN提出了一種解決方案，該解決方案：

覆蓋默認瀏覽器行為

>有效地對待

，因此可以在CSS 中進行樣式 重複JavaScript中的所有自動完整功能

>我已經進一步增強了它，並且代碼可在GitHub上使用。要使用它，請作為ES6模塊中的HTML頁面中的任何位置加載腳本。可以使用JSDELIVR CDN URL：

<span><span><span><datalist> id<span>="countrydata"</span>></datalist></span>
</span>  <span><span><span><option>></option></span>Afghanistan<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Åland Islands<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Albania<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Algeria<span><span></span>></span>
</span>  <span><span><span><option>></option></span>American Samoa<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Andorra<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Angola<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Anguilla<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Antarctica<span><span></span>></span>
</span>  ...etc...
<span><span><span></span>></span>
</span></span></span></span></span></span></span></span></span></span></span>

>，如果您使用的是捆綁器：，則可以使用NPM安裝它：

<span><span><span><label> for<span>="country"</span>></label></span>country<span><span></span>></span>
</span>
<span><span><span><input> type<span>="text"</span>
</span></span><span>  <span>list<span>="countrydata"</span>
</span></span><span>  <span>id<span>="country"</span> name<span>="country"</span>
</span></span><span>  <span>size<span>="50"</span>
</span></span><span>  <span>autocomplete<span>="off"</span> /></span>
</span></span></span>

>您的元素必須使用 value 格式。例如：

<span><span><span><datalist> id<span>="mylist"</span>></datalist></span>
</span>  <span><span><span><option>></option></span>label one<span><span></span>></span>
</span>  <span><span><span><option>></option></span>label two<span><span></span>></span>
</span>  <span><span><span><option>></option></span>label three<span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span>

> >

注意：無法使用，因為它會導致無法定型的空元素！ > 然後可以添加

CSS以樣式一些或全部和元素。例如：

<span><span><span><datalist> id<span>="mylist"</span>></datalist></span>
</span>  <span><span><span><option> value<span>="label one"</span> /></option></span>
</span>  <span><span><span><option> value<span>="label two"</span> /></option></span>
</span>  <span><span><span><option> value<span>="label three"</span> /></option></span>
</span><span><span><span></span></span></span></span></span></span></span>

> >示例：

>請參閱pen

html5 autocomplete css findling by sitepoint（@sitepoint）
> codepen。

>造型有效，但是值得付出努力嗎？

我不懷疑……

>重新實現瀏覽器的標準鍵盤，鼠標和触摸控件，並具有合理的可訪問性。 MDN示例不支持鍵盤事件，儘管我試圖改進該事件，但某些設備上不可避免地會有問題。

>您依靠200行JavaScript來解決CSS問題。它的縮小為1.5kb，但是如果您在同一頁面上需要許多元素，則可能會引入性能問題。
如果JavaScript是必需的，最好使用更漂亮，更一致，經過戰鬥測試的JavaScript組件？
>當JavaScript失敗時，控件返回到標準的HTML5 而無需樣式，但這是一個較小的好處。

創建AJAX-增強

>假定您的設計師很樂意接受瀏覽器樣式差異，可以使用JavaScript增強標準功能。例如：

實現可選驗證，該驗證僅接受。中的已知值

set > Åland Islands> Albania> Algeria> American Samoa> Andorra> Angola> Anguilla> Antarctica> ...etc... >

不需要設置resultdata屬性，因為這是返回的唯一數據（沒有包裝器對象）。結果名稱屬性必須設置為“名稱”，因為該屬性用於填充Datalist

datalist-ajax如何工作

如果您不想閱讀230行代碼並保持魔術的活力！

<span><span><span><label> for<span>="country"</span>></label></span>country<span><span></span>></span>
</span>
<span><span><span><input> type<span>="text"</span>
</span></span><span>  <span>list<span>="countrydata"</span>
</span></span><span>  <span>id<span>="country"</span> name<span>="country"</span>
</span></span><span>  <span>size<span>="50"</span>
</span></span><span>  <span>autocomplete<span>="off"</span> /></span>
</span></span></span>

>代碼最初在中創建一個新的，它使用列表屬性將其連接到子。輸入事件處理程序監視並在輸入最小數量的字符並且用戶仍未鍵入時調用runquery（）函數。 > > runquery（）從表單中的數據中構建API URL，並使用fetch api進行AJAX調用。解析返回的JSON，然後構造一個可重複使用的DOM片段，並將其放置在緩存中。 >

> datalistupdate（）函數被調用，該函數用適當的緩存DOM片段更新。如果查詢已經被緩存或可以使用以前的查詢，請訪問runquery（）避免訪問ajax調用。

>更改事件處理程序還監視，當焦點從字段移動並且值已修改時，它會觸發。該函數檢查該值是否匹配已知選項，並在必要時使用約束驗證API顯示在有效屬性中提供的錯誤消息。

>假設已經選擇了有效的選項，則使用匹配的數據AUTOFILL屬性將更改處理程序函數填充所有字段。保留對自動填充字段的引用，以便如果隨後輸入無效的選項，則可以重置它們。

請注意，Shadow dom是

未使用的。這樣可以確保自動完成（和）元素可以由CSS進行樣式，並在必要時由其他腳本訪問。 dunkin’ > HTML5 有局限性，但是如果您需要簡單的框架 - 無術自動完整字段，則是理想的選擇。缺乏CSS支持是可恥的，但是瀏覽器供應商最終可能會解決該監督。

>本教程中顯示的任何代碼和示例均可用於您自己的項目。使用HTML5 Datalist

>什麼是HTML5 DataList元素，它如何工作？ >>我如何將html5數據級使用html5 datalist用於autoComplete？

需要將數據師與輸入字段相關聯。這是通過將列表屬性添加到輸入字段並將其值設置為數據師ID來完成的。然後，瀏覽器將根據用戶的輸入和Datalist中的定義選項建議自動完成選項。

>我可以在所有瀏覽器中使用HTML5 DataList元素嗎？

大多數現代瀏覽器，包括Chrome，Firefox，Safari和Edge。但是，Internet Explorer 9和更早版本中不支持它。您可以在網站上查看當前的瀏覽器兼容性，例如我可以使用。

>不幸的是，我如何設置HTML5 DataList選項？

，HTML5 DATALIST元素的樣式選項非常有限。下拉列表的外觀由瀏覽器控制，無法通過CSS自定義。但是，您可以為與數據師關聯的輸入字段進行樣式。

>我可以將多個數據師用於單個輸入字段嗎？

不，您不能將多個數據師與單個輸入字段相關聯。輸入字段的列表屬性只能採用一個ID，該ID與一個數據庫相對應。如果您需要提供多組選項，則可能需要使用JavaScript根據用戶輸入動態更改選項。

>我可以將HTML5 Datalist與其他輸入類型一起使用嗎？，HTML5 DataList可以與各種輸入類型一起使用，包括文本，搜索，電話，電子郵件，日期，月，每週，時間，時間，日期，本地，數字，範圍，範圍和顏色。但是，對某些輸入類型（例如範圍或顏色）的自動完成功能可能無法正常工作。

我可以使用SELECT元素使用HTML5 Datalist？與選擇元素一起使用。數據師旨在為輸入字段提供自動完成建議，而SELECT元素提供了選項的下拉列表。如果您需要下拉列表，則應使用Select element。刪除或更改選項。但是，請記住，數據師不支持Onchange或OnClick之類的事件。您需要將事件偵聽器添加到關聯的輸入字段中。

>我可以將HTML5 DataList用於搜索字段嗎？
我可以使用textarea的html5數據庫來使用html5 dataList？
不，html5 dataList不能與textarea一起使用。。數據師旨在為輸入字段提供自動完成建議，而不是針對文本方面的建議。如果您需要用於文本方面的自動完成功能，則可能需要使用JavaScript庫或構建自己的解決方案。

以上是使用HTML5數據師輕量級自動完成控件的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

軌道力學（或我如何優化CSS KeyFrames動畫）May 09, 2025 am 09:57 AM

重構自己的代碼看起來是什麼樣的？約翰·瑞亞（John Rhea）挑選了他寫的一個舊的CSS動畫，並介紹了優化它的思維過程。

CSS動畫：很難創建它們嗎？May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@KeyFrames CSS：最常用的技巧May 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatoryand and powerincreatingsmoothcsssanimations.keytricksinclude：1）definingsmoothtransitionsbetnestates，2）使用AnimatingMultatingMultationMultationProperPertiessimultane，3）使用使用4）使用BombingeNtibalibility，4）使用CombanningWiThjavoFofofofoftofofo

CSS計數器：自動編號的綜合指南May 07, 2025 pm 03:45 PM

CSSCOUNTERSAREDOMANAGEAUTOMANAMBERINGINWEBDESIGNS.1）他們可以使用forterablesofcontents，ListItems，and customnumbering.2）AdvancedsincludenestednumberingSystems.3）挑戰挑戰InclassINCludeBrowsEccerCerceribaliblesibility andperformiballibility andperformissises.4）創造性