Searchform

searchform pattern

<form class="searchform "> <input class="form-control " type="text" placeholder=""> <buton class="btn btn iconButton iconButton--type-d search-button"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#search"></use> </svg> <span class="title"> <!-- --> </span> </buton> </form>

Disabled

<form class="searchform disabled"> <input class="form-control " type="text" placeholder="" disabled> <buton class="btn btn iconButton iconButton--type-d search-button"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#search"></use> </svg> <span class="title"> <!-- --> </span> </buton> </form>

Autosuggest

Bei Eingabe von "Bro" erscheint das Autosuggest.

<form class="searchform " data-url="/json/list-items.json?q&#x3D;"> <input class="form-control is-awesomeplete" type="text" placeholder=""> <buton class="btn btn iconButton iconButton--type-d search-button"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#search"></use> </svg> <span class="title"> <!-- --> </span> </buton> <template id="autocompleteItem"> <div class="autocomplete-item"> <div class="autocomplete-item-image"> <img src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2250%22%20height%3D%2250%22%20viewBox%3D%220%200%2050%2050%22%3E%3Crect%20fill%3D%22%23ddd%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%235d5d5d%22%20font-family%3D%22sans-serif%22%20font-size%3D%2210%22%20dy%3D%224%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3E50%20%26%23215%3B%2050%3C%2Ftext%3E%3C%2Fsvg%3E" /> </div> <div class="autocomplete-item-body"> <div class="autocomplete-item-title"> title </div> <div class="autocomplete-item-number"> <span class="font-weight-medium">Axronummer:</span> <em>BRO</em>DK11201 <br> <span class="font-weight-medium">EAN:</span> 4977766643931 <br> <span class="font-weight-medium">OEM:</span> LC1000BKBP2DR <br> <span class="font-weight-medium">Kunden-Artikelnr:</span> <em>BRO</em>-LC1000T <br> </div> </div> </div> </template> </form>

Autosuggest (Short)

Bei Eingabe von "Bro" erscheint das Autosuggest.

<form class="searchform disabled" data-url="/json/list-items.json?q&#x3D;"> <input class="form-control is-awesomeplete short" type="text" placeholder=""> <buton class="btn btn iconButton iconButton--type-d search-button disabled"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#search"></use> </svg> <span class="title"> <!-- --> </span> </buton> <template id="autocompleteItem"> <div class="autocomplete-item"> <div class="autocomplete-item-image"> <img src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2250%22%20height%3D%2250%22%20viewBox%3D%220%200%2050%2050%22%3E%3Crect%20fill%3D%22%23ddd%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%235d5d5d%22%20font-family%3D%22sans-serif%22%20font-size%3D%2210%22%20dy%3D%224%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3E50%20%26%23215%3B%2050%3C%2Ftext%3E%3C%2Fsvg%3E" /> </div> <div class="autocomplete-item-body"> <div class="autocomplete-item-title"> title </div> <div class="autocomplete-item-number"> <span class="font-weight-medium">Axronummer:</span> <em>BRO</em>DK11201 <br> <span class="font-weight-medium">EAN:</span> 4977766643931 <br> <span class="font-weight-medium">OEM:</span> LC1000BKBP2DR <br> <span class="font-weight-medium">Kunden-Artikelnr:</span> <em>BRO</em>-LC1000T <br> </div> </div> </div> </template> </form>