Semantic-UI Search Local Search Type

Last Updated : 24 Feb, 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 Search Type is used to search from the items available locally to the function. We need to specify the data source items to the search element.

Semantic UI Search Local Search Type Options:

source: We need to provide the data source to this option in a form of a list of objects.

Syntax: We need to initialize the Search Local type with the source option as follows:

$('.ui.search').search({
    source: tutorials,
})

And the data source should be as follows:

var tutorials = [
    { title: 'Data Structures' },
    { title: 'Algorithms' },
]

Example: In the following example, we have a search bar with a local search type.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <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 Search 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 tutorials = [ 
            { title: 'Data Structures' }, 
            { title: 'Algorithms' }, 
            { title: 'Machine Learning' }, 
            { title: 'Web Development' }, 
            { title: 'Competitive Programming' }, 
            { title: 'Java' }, 
            { title: 'C' }, 
            { title: 'C#' }, 
            { title: 'C++' }, 
        ] 
        $('.ui.search').search({ 
            source: tutorials, 
        }) 
    </script> 
</body> 
  
</html> 