<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="Handcrafted Granite Tuna ">
<option value="Electronic Steel Soap ">
<option value="Incredible Fresh Cheese ">
<option value="Recycled Granite Chips ">
<option value="Fantastic Fresh Car ">
<option value="Awesome Soft Salad ">
<option value="Generic Granite Table ">
<option value="Oriental Frozen Fish ">
<option value="Handmade Fresh Chips ">
<option value="Bespoke Frozen Shirt ">
</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": "Handcrafted Granite Tuna"
}
},
{
"datalist": {
"option": "Electronic Steel Soap"
}
},
{
"datalist": {
"option": "Incredible Fresh Cheese"
}
},
{
"datalist": {
"option": "Recycled Granite Chips"
}
},
{
"datalist": {
"option": "Fantastic Fresh Car"
}
},
{
"datalist": {
"option": "Awesome Soft Salad"
}
},
{
"datalist": {
"option": "Generic Granite Table"
}
},
{
"datalist": {
"option": "Oriental Frozen Fish"
}
},
{
"datalist": {
"option": "Handmade Fresh Chips"
}
},
{
"datalist": {
"option": "Bespoke Frozen Shirt"
}
}
]
}
To test search field ‘auto suggest’ functionality, try entering sample titles used in Search Results component or page.