Bei vielen Seiten vorallem neuen Responsive-Seiten, wünscht man sich eine Suchbox die man komplett selber gestalten kann. Die Plugins die man findet, sind leider nicht immer passend und selber schreiben geht, aber wie….

Hier im Artikel, zeige ich euch wie es mit kurzen TypoScript anweisungen dies zu realisieren ist.


Beispiel für die Suchbox findet ihr auf dieser Seite: » Link

Typoscript (Konstanten)

# system
###############################
search_root         = 1
search_result       = 37

Typoscript (Setup)

# Searchbox
###############################
lib.suche = COA
lib.suche {
10 = COA
10 {
10 = TEXT
10 {
typolink.parameter = {$search_result}
typolink.returnLast = url
wrap = <div class="container mm_search"><form action="|" method="post" id="indexedsearch_mmenu">
}

20 = COA
20 {
10 = COA
10 {
10 = TEXT
10.value = <input type="hidden" name="tx_indexedsearch[sections]" value="0" />
20 = TEXT
20.value = <input name="tx_indexedsearch[submit_button]" value="Search" type="hidden" />

30 = TEXT
30 {
value = <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
}
wrap = <span class="input-group-btn">|</span>
}
20 = TEXT
20 {
value = <input name="tx_indexedsearch[sword]" value="" placeholder="{$suche_placeholder}" class="form-control searchbox-sword" type="text" />
}
wrap =  <div class="input-group">|</div>
}
wrap = | </form></div>
}
wrap = <div class="header-search">|</div>
}

Styling (CSS)

/* ==========================================================================
Search
========================================================================== */
.header-search {position: absolute;left: 0;top:-100px;width: 100%;padding: 20px 50px;background-color: rgba(255,255,255,0.7);opacity: 0}
.header-search {-webkit-transition: all 300ms;-moz-transition: all 300ms;-ms-transition: all 300ms;-o-transition: all 300ms;transition: all 300ms;}
.header-search.in {top:100%;z-index: 99;opacity: 1}
.header-search .mm_search {padding: 0}
.header-search #indexedsearch_mmenu {max-width: 400px;margin: 0 auto;}
.header-search #indexedsearch_mmenu .btn,
.header-search #indexedsearch_mmenu .form-control {background: none transparent;border:0 none;box-shadow: none;}
.header-search #indexedsearch_mmenu .btn {border-right: 1px solid #000;}
.header-search #indexedsearch_mmenu .form-control {font-size: 16px;color:#005BAA;}

Template (Fluid)

<header id="header">
<f:cObject typoscriptObjectPath="lib.suche" />
</header>

viel Spaß damit.
Alles zum Code zusammen in der .ZIP-Datei
Download: eigene-suchbox-mit-typoscript-fuer-indexed-search-tx_indexedsearch