<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="Modern Bronze Gloves ">
<option value="Fantastic Cotton Bike ">
<option value="Fantastic Plastic Soap ">
<option value="Incredible Bronze Soap ">
<option value="Tasty Frozen Fish ">
<option value="Gorgeous Frozen Fish ">
<option value="Recycled Wooden Salad ">
<option value="Tasty Bronze Towels ">
<option value="Incredible Fresh Salad ">
<option value="Fantastic Concrete Bacon ">
</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": "Modern Bronze Gloves"
}
},
{
"datalist": {
"option": "Fantastic Cotton Bike"
}
},
{
"datalist": {
"option": "Fantastic Plastic Soap"
}
},
{
"datalist": {
"option": "Incredible Bronze Soap"
}
},
{
"datalist": {
"option": "Tasty Frozen Fish"
}
},
{
"datalist": {
"option": "Gorgeous Frozen Fish"
}
},
{
"datalist": {
"option": "Recycled Wooden Salad"
}
},
{
"datalist": {
"option": "Tasty Bronze Towels"
}
},
{
"datalist": {
"option": "Incredible Fresh Salad"
}
},
{
"datalist": {
"option": "Fantastic Concrete Bacon"
}
}
]
}
To test search field ‘auto suggest’ functionality, try entering sample titles used in Search Results component or page.