BX Swiss Component Library

Suggest

The suggest component is used to display search results for an auto suggest field. This search functionality has to be implemented through the use of JavaScript.

<div class="suggest">
    <div class="field ">
        <label for="field-id" class="field__label"></label>
        <input id="field-id" type="text" name="field-name" class="field__input" placeholder="Search for instrument">
    </div>
    <ul class="suggest__list">
        <li class="suggest__item">
            <a href="#" class="suggest__link">
                    CH0001624714 (CPH CHEMIE PAPIER HOLDING AG NAMENS AKTIEN A SF 5)
                </a>
        </li>
        <li class="suggest__item">
            <a href="#" class="suggest__link">
                    CH0001931853 (CHAM PAPER GROUP HLDG AG NAMENS AKTIEN SF 65)
                </a>
        </li>
        <li class="suggest__item">
            <a href="#" class="suggest__link">
                    CH0006937772 (Charles Voegele Holding AG)
                </a>
        </li>
        <li class="suggest__item">
            <a href="#" class="suggest__link">
                    CH0010570759 (Chocoladefabriken Lindt Spruengli AG)
                </a>
        </li>
    </ul>
</div>
 
<div class="suggest">
    {{> @field placeholder="Search for instrument"}}
    <ul class="suggest__list">
        {{#each items}}
            <li class="suggest__item">
                <a href="#" class="suggest__link">
                    {{label}}
                </a>
            </li>
        {{/each}}
    </ul>
</div>
 
{
  "items": [
    {
      "label": "CH0001624714 (CPH CHEMIE PAPIER HOLDING AG NAMENS AKTIEN A SF 5)"
    },
    {
      "label": "CH0001931853 (CHAM PAPER GROUP HLDG AG NAMENS AKTIEN SF 65)"
    },
    {
      "label": "CH0006937772 (Charles Voegele Holding AG)"
    },
    {
      "label": "CH0010570759 (Chocoladefabriken Lindt Spruengli AG)"
    }
  ]
}