Code Blender

An atomic Middleman partials library

Search input

  2. Molecule
  3. Search input

Example

No Results Found 
= codeBlender "search-input", "molecule"

<div class='search-input ng-cloak'>
<div class='form-group' show-errors='{showSuccess: true}'>
<label class='control-label sr-only' for='search'>
Search
</label>
<div class='input-group'>
<span class='fa fa-search input-group-addon' ng-hide='loading'></span>


<input autocomplete='off' class='form-control' clear-btn id='search' name='search' ng-model='searchInput.query' placeholder='Search...' type='text' typeahead-loading='loading' typeahead-no-results='noResults' uib-typeahead='data for data in searchInput.complete( $viewValue )'>

<span class='input-group-btn'><button class='btn btn-default' type='button'>
button

</button>
</span>
</div>


</div>

<div ng-show='noResults'>
No Results Found
</div>
</div>

Features

  • Angular directive to control all aspects of this component
  • Typeahead option enabled using Angular UI Typeahead
  • Refresh icon appears when utilising the typeahead

Translation

Place the following inside your locale file

# Search
search-input :
    button :
        text : "Search"
    input:
        placeholder : "Search"
    label :
        label : "Search"

Hierarchy

Utilises the button and input partials

HERE

HERE

Resources Useful websites and tutorials

Title URL
Bootstrap search addons http://getbootstrap.com/components/#input-groups-buttons
Search usability https://uxmag.com/articles/usability-tip-dont-make-me-search-for-search

Tasks

Task Date
Include typeahead
Validation
Icons to show typeahead is thinking
Ability to only allow search once typeahead is selected
Prepend with button filter for selection