Semantic-UI Search Category Type

Last Updated : 16 Jun, 2022

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. The best part about this framework is that it creates beautiful and responsive layouts as it contains pre-built semantic components.

Semantic UI Search is a module with the help of which the user can search specific data from a collection of data. It is an essential component of any website as it assists the user to get the result efficiently.

There are times when the user wants data from a specific category. For example Sports, Birds, Computer Science, etc. Semantic UI provides us with a Search Category Type class that displays content with respect to categories.

Semantic UI Search Category Type Class:

category: It is a search type that is used to display the result with respect to the categories of content.

Syntax:

<div class="ui category search">
   ...
</div>

Example 1: In the following program, we will be creating a search category for a “Unique ID No”.

HTML

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Semantic UI Search Category Type</title>
      <link rel="stylesheet" href=
 "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">     
   </head>
   <body>
      <br>
      <div class="ui green huge header">GeeksforGeeks</div>
      <div class="ui large header">Search Category </div> 
      <br>
      <div class="ui category search"> <!--Search Category-->
         <div class="ui icon input">
           <input class="prompt" type="number"
                  placeholder="Search Unique ID No.">
           <i class="search icon"></i>
         </div>
         <div class="results"></div>
      </div>
   </body>
</html>

Output:

Example 2: In the following program, we will be creating a search category for “student name”.

HTML

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Semantic UI Search Category Type</title>
      <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">     
   </head>
   <body>
      <br>
      <div class="ui green huge header">GeeksforGeeks</div>
      <div class="ui large header">Search Category </div> 
      <br>
      <div class="ui category search"> <!--Search Category-->
         <div class="ui icon input">
           <input class="prompt" type="text"
                  placeholder="Search Student Name">
           <i class="search icon"></i>
         </div>
         <div class="results"></div>
      </div>
   </body>
</html>