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

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

鑰匙要點

html5` `元素為自動完整的表單控件提供了輕巧，易於訪問和跨瀏覽器解決方案，而無需依賴JavaScript。

> `，````````````'>```````'

瀏覽器對 `在包括Internet Explorer 10和11在內的現代瀏覽器中具有強大的功能，其中可用於舊瀏覽器的後備選項使用`>'和文本輸入的組合。 🎜>

' `元素不能直接用CSS來設計，該元素可以限制自定義，但可以確保在不同的瀏覽器和平台上保持一致性。

>諸如Ajax之類的增強功能可以與`` >'' `以基於用戶輸入的動態填充選項，改善功能和用戶體驗需要實時數據反饋的應用程序。 >

？ >有什麼問題 當您希望用戶從少量選項中進行選擇時， > html5 控件是理想的選擇。它們在以下情況時不太實用： 有很多選擇，例如國家或職位標題 用戶想要輸入自己的選項，該選項不在列表中 > 明顯的解決方案是自動完成控制。這允許用戶輸入幾個字符，該字符限制了可快速選擇的選項。 > 在您開始鍵入時會跳到正確的位置，但這並不總是顯而易見的。它不會在所有設備（例如觸摸屏）上使用，並且在一兩秒鐘內重置。 >

>開發人員通常會轉向許多JavaScript供電的解決方案之一，但是自定義的自動完成控制並不總是必要的。 HTML5 元素是輕巧，可訪問的，並且沒有JavaScript依賴關係。您可能已經聽說過它是越野車或缺乏支持。在2021年，情況並非如此，但是有瀏覽器的不一致和警告。 快速啟動 從包含200多個選項的列表中挑選您的國家是自動完成控制的理想選擇。在HTML頁面中直接在每個國家 /地區定義 元素： 然後可以通過任何字段中的列表屬性來引用數據師的ID：

>令人困惑的是，最好將AutoComplete =“ OFF”設置。這樣可以確保在 中顯示用戶的值，但不在瀏覽器中輸入的值。 。

結果：

這是Microsoft Edge中的默認渲染。其他應用程序實現了相似的功能，但外觀在平台和瀏覽器之間有所不同。

> 選項 使用標籤作為的文本孩子很常見： >

id ="countrydata" > > Afghanistan > > Åland Islands > > Albania > > Algeria > > American Samoa > > Andorra > > Angola > > Anguilla > > Antarctica > ...etc... > 登入後複製 登入後複製 登入後複製 登入後複製 使用一個值屬性產生相同的結果：

for ="country" > country > type ="text" list ="countrydata" id ="country" name ="country" size ="50" autocomplete ="off" /> 登入後複製 登入後複製 登入後複製 > 注意：閉合 />斜杠在HTML5中是可選的，儘管它可以幫助防止編碼錯誤。 >您還可以使用以下任何一種格式根據所選標籤設置值。 >選項1：

>選項2：

在兩種情況下，當選擇有效的選項時，輸入字段均設置為1、2或3 id ="mylist" > > label one > > label two > > label three > > 登入後複製 登入後複製 chrome顯示了帶有值和標籤的列表。一旦選擇了一個選項，只有該值保留。

> Firefox僅顯示標籤的列表。選擇一個選項後，它將切換到該值。 id ="mylist" > value ="label one" /> value ="label two" /> value ="label three" /> > 登入後複製 登入後複製 邊緣僅顯示值。

> 以下codepen示例顯示了所有變體： >請參閱pen html5 sitepoint（@sitepoint） 上的自動完成示例。 實現將不斷發展，但目前，我建議您不要使用價值和標籤，因為它可能會使用戶混淆。

（下面討論了解決方法。） autocomplete examples" data-slug-hash="jOVqGaJ" data-theme- data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> > 瀏覽器支持和後備

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

>

有幾種實施說明，但不會影響大多數用法。最糟糕的情況是一個字段恢復為標准文本輸入。 如果您絕對必須支持IE9及以下，則有一個後備模式，該模式在 失敗時使用標準 與文本輸入結合使用。改編國家示例： id ="countrydata" > > Afghanistan > > Åland Islands > > Albania > > Algeria > > American Samoa > > Andorra > > Angola > > Anguilla > > Antarctica > ...etc... > 登入後複製 登入後複製 登入後複製 登入後複製 autocomplete fallback" data-slug-hash="GRNZMyx" data-theme- data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">請參閱pen html5 sitepoint（@sitepoint） 上的自動完成後返回。

>

在現代瀏覽器中，元素成為 的一部分，而 ”或其他標籤未顯示。它看起來與上面的示例相同，但是鄉村的形式值將設置為一個空字符串。 在IE9及以下，（非常長的） 和文本輸入字段都處於活動狀態： >

兩個值都可以在舊的IE中輸入。您的申請必須要么：

確定哪個最有效的或 >

>使用一個小的JavaScript函數重置另一個函數

>在非文本控件上使用 基於鉻的瀏覽器也可以將 值應用於： > >具有“日期”類型的輸入。用戶可以從定義為yyyy-mm-dd值的一系列選項中進行選擇，但以其語言環境格式呈現。

>具有“顏色”類型的輸入。用戶可以從定義為六位數六位數值的顏色選項中選擇（三位數值不起作用）。 >

>具有“範圍”類型的輸入。滑塊顯示刻度標記，儘管這並不能限制可以輸入哪個值。 >

>在其他輸入類型上，請參見pen html5 sitepoint（@sitepoint） 上的其他輸入類型。

CSS樣式 on other input types" data-slug-hash="abBNLqZ" data-theme- data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">如果您曾經掙扎過樣式 盒子， …您很容易！ 可以將其視為正常的樣式，但是鏈接的 及其子元素不能在CSS中進行樣式。列表渲染完全由平台和瀏覽器確定。

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

覆蓋默認瀏覽器行為 >有效地對待 ，因此可以在CSS 中進行樣式 重複JavaScript中的所有自動完整功能

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

id ="countrydata" > > Afghanistan > > Åland Islands > > Albania > > Algeria > > American Samoa > > Andorra > > Angola > > Anguilla > > Antarctica > ...etc... > 登入後複製 登入後複製 登入後複製 登入後複製 >，如果您使用的是捆綁器： ，則可以使用NPM安裝它：

for ="country" > country > type ="text" list ="countrydata" id ="country" name ="country" size ="50" autocomplete ="off" /> 登入後複製 登入後複製 登入後複製 >您的 元素必須使用 value 格式。例如：

id ="mylist" > > label one > > label two > > label three > > 登入後複製 登入後複製 > 注意： 無法使用，因為它會導致無法定型的空元素！ > 然後可以添加

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

id ="mylist" > value ="label one" /> value ="label two" /> value ="label three" /> > 登入後複製 登入後複製 >示例：

>請參閱pen autocomplete CSS styling" data-slug-hash="JjbXrvE" data-theme- data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">html5 autocomplete css findling by sitepoint（@sitepoint） > codepen。

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

我不懷疑…… >

>重新實現瀏覽器的標準鍵盤，鼠標和触摸控件，並具有合理的可訪問性。 MDN示例不支持鍵盤事件，儘管我試圖改進該事件，但某些設備上不可避免地會有問題。 > >您依靠200行JavaScript來解決CSS問題。它的縮小為1.5kb，但是如果您在同一頁面上需要許多 元素，則可能會引入性能問題。 如果JavaScript是必需的，最好使用更漂亮，更一致，經過戰鬥測試的JavaScript組件？ >當JavaScript失敗時，控件返回到標準的HTML5 而無需樣式，但這是一個較小的好處。 > 創建AJAX-增強

>假定您的設計師很樂意接受瀏覽器樣式差異，可以使用JavaScript增強標準 功能。例如： 實現可選驗證，該驗證僅接受 。 中的已知值

set ajax調用搜索apis的數據中的元素。 > 選擇選項時 設置其他字段值。例如，在隱藏的輸入中選擇“美國”將“我們”設置為“我們”。 儘管有幾個編碼注意事項，代碼主要需要重新定義元素： 進入最小數量的字符。 鍵入事件應為 拒絕 。也就是說，僅一旦用戶停止鍵入至少半秒，就會觸發AJAX調用。 >查詢結果應該被緩存，因此不必重複或解析相同的呼叫。 > 不必要的查詢應避免。例如，輸入“ Un” 返回12個國家。無需進一步呼籲 >“單位” >或 “ united” >，因為所有結果選項都包含在原始12個結果中。 >我已經為此創建了一個標準的Web組件，並且該代碼在GitHub上可用。下面的Codepen示例允許您在輸入至少兩個字符後選擇一個有效的國家。然後，音樂藝術家自動完成，然後返回起源於該國的藝術家，名字與搜索字符串相匹配： 請參見Pen html5 ajax autocomplete by sitepoint（@sitepoint） > codepen。

with Ajax autocomplete" data-slug-hash="ExNKwRy" data-theme- data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> >國家查找API由RESTCOUNTRIES.EU提供 音樂藝術家查找API由Musicbrainz.org提供

在您自己的應用程序中使用它，將腳本在HTML頁面中的任何位置加載為ES6模塊。可以使用JSDELIVR CDN URL：

>，如果您使用的是捆綁器： ，則可以使用NPM安裝它： >用子創建一個元素，以用作數據輸入字段。例如，國家查找使用以下方式： 元素屬性：

屬性 描述

API REST API URL（必需）

resultdata 包含返回API JSON中對象的結果數組的屬性的名稱（如果僅返回結果，則不需要）

結果名 每個結果對像中屬性的名稱與搜索輸入匹配，用於Datalist elements（必需）

Querymin 觸發搜索之前要輸入的字符數量最小數（默認：1）

inputdelay 在搜索之前，在關鍵點之間等待毫秒的最小時間（默認訪問：300）

OptionMax 顯示的最大數量自動完成選項（默認值：20）

有效的 如果設置，當選擇無效的值時，顯示此錯誤消息

>其餘的URL必須至少包含一個$ {id}標識符，該標識符由該ID的中設置的值代替。在上面的示例中，api url中的$ {country}引用了子中的值，該值具有“ country”的ID。 URL通常會使用子輸入，但是可以引用頁面上的任何其他字段。

restcountries.eu api返回一個對像或包含鄉村數據的對象。例如：

id ="countrydata" > > Afghanistan > > Åland Islands > > Albania > > Algeria > > American Samoa > > Andorra > > Angola > > Anguilla > > Antarctica > ...etc... > 登入後複製 登入後複製 登入後複製 登入後複製 不需要設置resultdata屬性，因為這是返回的唯一數據（沒有包裝器對象）。結果名稱屬性必須設置為“名稱”，因為該屬性用於填充Datalist elements。 選擇選項時，可以自動填充其他字段。以下輸入接收“ alpha2code”和“ region”屬性數據，因為已經設置了數據AUTOFILL屬性： >

datalist-ajax如何工作

如果您不想閱讀230行代碼並保持魔術的活力！ for ="country" > country > type ="text" list ="countrydata" id ="country" name ="country" size ="50" autocomplete ="off" /> 登入後複製 登入後複製 登入後複製 >代碼最初在 中創建一個新的 ，它使用列表屬性將其連接到子。輸入事件處理程序監視並在輸入最小數量的字符並且用戶仍未鍵入時調用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庫或構建自己的解決方案。