> 選擇選項(xiàng)時(shí)
1. 設(shè)置其他字段值。例如，在隱藏的輸入中選擇“美國”將“我們”設(shè)置為“我們”。
2. 儘管有幾個(gè)編碼注意事項(xiàng)，代碼主要需要重新定義元素：

• 進(jìn)入最小數(shù)量的字符。
鍵入事件應(yīng)為
• 拒絕。也就是說，僅一旦用戶停止鍵入至少半秒，就會(huì)觸發(fā)AJAX調(diào)用。 >查詢結(jié)果應(yīng)該被緩存，因此不必重複或解析相同的呼叫。 >
不必要的查詢應(yīng)避免。例如，輸入“ Un”
• 返回12個(gè)國家。無需進(jìn)一步呼籲
>“單位”
• >或“ united”>，因?yàn)樗薪Y(jié)果選項(xiàng)都包含在原始12個(gè)結(jié)果中。 >我已經(jīng)為此創(chuàng)建了一個(gè)標(biāo)準(zhǔn)的Web組件，並且該代碼在GitHub上可用。下面的Codepen示例允許您在輸入至少兩個(gè)字符後選擇一個(gè)有效的國家。然後，音樂藝術(shù)家自動(dòng)完成，然後返回起源於該國的藝術(shù)家，名字與搜索字符串相匹配： 請參見Pen
html5

>國家查找API由RESTCOUNTRIES.EU提供
音樂藝術(shù)家查找API由Musicbrainz.org提供

在您自己的應(yīng)用程序中使用它，將腳本在HTML頁面中的任何位置加載為ES6模塊?？梢允褂肑SDELIVR CDN URL：

• >，如果您使用的是捆綁器：，則可以使用NPM安裝它：
• >用子創(chuàng)建一個(gè)元素，以用作數(shù)據(jù)輸入字段。例如，國家查找使用以下方式：

元素屬性：

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

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

不需要設(shè)置resultdata屬性，因?yàn)檫@是返回的唯一數(shù)據(jù)（沒有包裝器對(duì)象）。結(jié)果名稱屬性必須設(shè)置為“名稱”，因?yàn)樵搶傩杂渺短畛銬atalist elements。 選擇選項(xiàng)時(shí)，可以自動(dòng)填充其他字段。以下輸入接收“ alpha2code”和“ region”屬性數(shù)據(jù)，因?yàn)橐呀?jīng)設(shè)置了數(shù)據(jù)AUTOFILL屬性：>

datalist-ajax如何工作

<span><span><span><label</span> for<span>="country"</span>></span>country<span><span></label</span>></span>
</span>
<span><span><span><input</span> 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>

>代碼最初在中創(chuàng)建一個(gè)新的