Semantic-UI Search Local Category Type

Last Updated : 11 Mar, 2022

Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create great user interfaces. It is a development framework used to create beautiful and responsive layouts.

Semantic UI Search is used to allow the user to search different things on the website. The search can help to search blogs, tools, other links, etc. Semantic UI Search Local Category Type is a search type that can search for categories from the static local data.

Semantic UI Search Local Category Type Options:

type: We need to pass the category option to this option to enable category searching.
source: Here we need to pass the data source.

Syntax:

Add the type and source to the Search for Local Category type as follows:

$('.ui.search').search({
  type: 'category',
  source: categoryTutorials,
})

And the data source should be as follows:

var categoryTutorials = [
    { category: 'Algorithms', title: 'Searching Algorithms' },
    { category: 'Algorithms', title: 'Sorting Algorithms' },
    { category: 'Algorithms', title: 'Graph Algorithms' },
]

Example: In the following example, we have the search of local category search type to search from the local data.

HTML

<!DOCTYPE html> 
<html> 
  <head> 
    <title> 
       Semantic-UI Search Local Category Type 
    </title> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" /> 
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" /> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet"/> 
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
  </head> 
  
  <body> 
    <div class="ui container"> 
      <center> 
        <div class="ui header green"> 
          <h1> 
            GeeksforGeeks 
          </h1> 
        </div> 
        <strong> 
          Semantic UI Search Local Category Type 
        </strong> 
      </center> 
      <div class="ui segment"> 
        <h1>Welcome to GeeksforGeeks</h1> 
        <p>Find the best programming tutorials here.</p> 
        <div class="ui search"> 
          <div class="ui icon input"> 
            <input class="prompt"
                     type="text"
                     placeholder="Search tutorials..."/> 
            <i class="search icon"></i> 
          </div> 
          <div class="results"></div> 
        </div> 
      </div> 
    </div> 
    <script> 
      var categoryTutorials = [ 
        { category: 'Algorithms', title: 'Searching Algorithms' }, 
        { category: 'Algorithms', title: 'Sorting Algorithms' }, 
        { category: 'Algorithms', title: 'Graph Algorithms' }, 
        { category: 'Algorithms', title: 'Pattern Searching' }, 
        { category: 'Algorithms', title: 'Geometric Algorithms' }, 
        { category: 'Algorithms', title: 'Mathematical' }, 
        { category: 'Data Structures', title: 'Arrays' }, 
        { category: 'Data Structures', title: 'Stack' }, 
        { category: 'Data Structures', title: 'Linked List' }, 
        { category: 'Data Structures', title: 'Heap' }, 
        { category: 'Data Structures', title: 'Hashing' }, 
        { category: 'Languages', title: 'C' }, 
        { category: 'Languages', title: 'C#' }, 
        { category: 'Languages', title: 'C++' }, 
        { category: 'Languages', title: 'Java' }, 
      ] 
  
      $('.ui.search').search({ 
        type: 'category', 
        source: categoryTutorials, 
      }) 
    </script> 
  </body> 
</html> 