semantic-ui
  1. semantic-ui-search
PreviousNext

Semantic UI Search

The Semantic UI Search component allows users to search and select items from a list. It provides features like remote data fetching, search filtering, and result highlighting.

Syntax:

<div class="ui search">
  <div class="ui icon input">
    <input class="prompt" type="text" placeholder="Search...">
    <i class="search icon"></i>
  </div>
  <div class="results"></div>
</div>

Use:

Semantic UI Search is a UI component developed by Semantic UI that allows users to search for content within a website or application. It is commonly used for search bars, search boxes, and search forms. The search component also provides suggestions in a dropdown menu as the user types in the search field.

Importance:

The Semantic UI Search component is important for the following reasons:

  • It simplifies the process of searching for content within a website or application.
  • It provides suggestions for search queries, improving the search experience for users.
  • It can be easily customized to fit the design and branding of a website or application.

Example:

Here is an example of how to use the Semantic UI Search component:

<div class="ui search">
  <div class="ui icon input">
    <input class="prompt" type="text" placeholder="Search...">
    <i class="search icon"></i>
  </div>
  <div class="results"></div>
</div>

<script>
  $('.ui.search')
    .search({
      apiSettings: {
        url: '//api.example.com/search?q={query}'
      },
      fields: {
        results: 'items',
        title: 'title',
        description: 'description',
        url: 'url'
      },
      minCharacters: 3
    });
</script>

Summary:

Semantic UI Search is a UI component used for searching for content within a website or application. It provides suggestions as the user types in the search field, improving the search experience for users. The component is easily customizable and can be added to any website or application.

RatingShape
Published on: