<form role="search" action="/" class="c-search">
<label class="o-label1" for="c-search-field">Search the California Digital Library</label>
<input class="o-input1" id="c-search-field" type="search" list="c-search-list" name="s" value="" placeholder="">
<datalist id="c-search-list">
<option value="Luxurious Steel Ball ">
<option value="Handmade Bronze Chair ">
<option value="Licensed Steel Table ">
<option value="Rustic Metal Ball ">
<option value="Electronic Bronze Soap ">
<option value="Modern Bronze Ball ">
<option value="Rustic Fresh Sausages ">
<option value="Incredible Granite Gloves ">
<option value="Handcrafted Soft Shoes ">
<option value="Oriental Rubber Pizza ">
</datalist>
<button class="o-button4" type="submit">Search</button>
</form>
<form role="search" action="{{ search.action }}" class="c-search">
{{> @label--1 }}
{{> @input }}
<datalist id="c-search-list">
{{#each list}}
<option value="{{ datalist.option }} ">
{{/each}}
</datalist>
{{> @button--4 }}
</form>
{
"search": {
"action": "/"
},
"label": {
"exists": true,
"for": "c-search-field",
"text": "Search the California Digital Library"
},
"input1": {
"id": "c-search-field",
"type": "search",
"list": "c-search-list",
"name": "s",
"value": "",
"placeholder": ""
},
"button4": {
"type": "submit",
"text": "Search"
},
"list": [
{
"datalist": {
"option": "Luxurious Steel Ball"
}
},
{
"datalist": {
"option": "Handmade Bronze Chair"
}
},
{
"datalist": {
"option": "Licensed Steel Table"
}
},
{
"datalist": {
"option": "Rustic Metal Ball"
}
},
{
"datalist": {
"option": "Electronic Bronze Soap"
}
},
{
"datalist": {
"option": "Modern Bronze Ball"
}
},
{
"datalist": {
"option": "Rustic Fresh Sausages"
}
},
{
"datalist": {
"option": "Incredible Granite Gloves"
}
},
{
"datalist": {
"option": "Handcrafted Soft Shoes"
}
},
{
"datalist": {
"option": "Oriental Rubber Pizza"
}
}
]
}
To test search field ‘auto suggest’ functionality, try entering sample titles used in Search Results component or page.