Newsletter
TechAnV Blog
Get updates on security engineering, Rust, eBPF, and DevSecOps. No spam, unsubscribe anytime.
Check your inbox and click the confirmation link to complete your subscription.
HTML datalist#
A Datasette feature suggestion concerning autocomplete against a list of known values inspired me to learn how to use the HTML <datalist> element (see MDN).
It’s really easy to use! It allows you to attach a list of suggested values to any input text box, and browsers will then suggest those while the user is typing - while also allowing them to type something entirely custom.
Here’s a basic example:
1<input type="text" list="party" name="political_party">2
3<datalist id="party">4<option value="Anti-Administration">5<option value="Pro-Administration">6<option value="Republican">7<option value="Federalist">8<option value="Democratic Republican">9<option value="Pro-administration">10<option value="Anti-administration">11<option value="Unknown">12<option value="Adams">13<option value="Jackson">14<option value="Jackson Republican">15<option value="Crawford Republican">16<option value="Whig">17<option value="Jacksonian Republican">18<option value="Jacksonian">19<option value="Anti-Jacksonian">20<option value="Adams Democrat">21<option value="Nullifier">22<option value="Anti Mason">23<option value="Anti Masonic">24<option value="Anti Jacksonian">25<option value="Democrat">26<option value="Anti Jackson">27<option value="Union Democrat">28<option value="Conservative">29<option value="Ind. Democrat">30<option value="Independent">31<option value="Law and Order">32<option value="American">33<option value="Liberty">34<option value="Free Soil">35<option value="Ind. Republican-Democrat">36<option value="Ind. Whig">37<option value="Unionist">38<option value="States Rights">39<option value="Anti-Lecompton Democrat">40<option value="Constitutional Unionist">41<option value="Independent Democrat">42<option value="Unconditional Unionist">43<option value="Conservative Republican">44<option value="Ind. Republican">45<option value="Liberal Republican">46<option value="National Greenbacker">47<option value="Readjuster Democrat">48<option value="Readjuster">49<option value="Union">50<option value="Union Labor">51<option value="Populist">52<option value="Silver Republican">53<option value="Free Silver">54<option value="Silver">55<option value="Democratic and Union Labor">56<option value="Progressive Republican">57<option value="Progressive">58<option value="Prohibitionist">59<option value="Socialist">60<option value="Farmer-Labor">61<option value="American Labor">62<option value="Nonpartisan">63<option value="Coalitionist">64<option value="Popular Democrat">65<option value="Liberal">66<option value="New Progressive">67<option value="Republican-Conservative">68<option value="Democrat-Liberal">69<option value="AL">70<option value="Libertarian">71</datalist>And here’s what that looks like in Firefox:

Creating them in JavaScript#
You can also create these in JavaScript using the DOM, for example:
1var parties = [2 "Anti-Administration",3 "Pro-Administration",4 "Republican",5 "Federalist",6 "Democratic Republican",7 "Pro-administration",8 "Anti-administration",9 "Unknown",10 "Adams",11 "Jackson"12];13var datalist = document.createElement("datalist");14datalist.id = "parties";15parties.forEach(function (party) {16 var option = document.createElement("option");17 option.value = party;18 datalist.appendChild(option);19});20document.body.appendChild(datalist);Then use input.setAttribute('id', 'parties') on any input elemnt you want to use that new datalist.