<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="Practical Frozen Soap ">
<option value="Tasty Wooden Pizza ">
<option value="Rustic Fresh Salad ">
<option value="Ergonomic Plastic Car ">
<option value="Generic Wooden Mouse ">
<option value="Electronic Wooden Towels ">
<option value="Luxurious Rubber Sausages ">
<option value="Handmade Cotton Fish ">
<option value="Practical Soft Salad ">
<option value="Refined Concrete Chips ">
</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": "Practical Frozen Soap"
}
},
{
"datalist": {
"option": "Tasty Wooden Pizza"
}
},
{
"datalist": {
"option": "Rustic Fresh Salad"
}
},
{
"datalist": {
"option": "Ergonomic Plastic Car"
}
},
{
"datalist": {
"option": "Generic Wooden Mouse"
}
},
{
"datalist": {
"option": "Electronic Wooden Towels"
}
},
{
"datalist": {
"option": "Luxurious Rubber Sausages"
}
},
{
"datalist": {
"option": "Handmade Cotton Fish"
}
},
{
"datalist": {
"option": "Practical Soft Salad"
}
},
{
"datalist": {
"option": "Refined Concrete Chips"
}
}
]
}
To test search field ‘auto suggest’ functionality, try entering sample titles used in Search Results component or page.