Semantic-UI Search Types
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. It uses a class to add CSS to the elements.
The search bar allows us to search for content on a website. It is an essential part of a website, which increases the ease of finding the desired item. Semantic UI provides us with a styled search bar. Let’s have a look at Semantic UI Search Types.
Semantic UI Search Types:
- Standard: A Standard Semantic UI Search that can be used to search for content on a webpage.
- Category: A Categorical search can be used to search for ordered categorical content from a remote source.
- Local Search: A Local Search searches for data in a local place such as local storage, process storage, etc.
- Local Categorical Search: A Local Categorical Search searches for ordered categorical data in a local place such as local storage, process storage, etc.
Semantic UI Search Class:
- search: This class is used to create a search bar.
Syntax:
<div class="ui search"> <div class="ui icon input"> <input class="prompt" type="text" placeholder="..."> <i class="search icon"></i> </div> <div class="results"></div> </div>
Example 1: In the below example, we have created a standard search.
HTML
<!DOCTYPE html> < html > < head > < 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" > < h2 class = "ui green header" >w3wiki</ h2 > < h4 >Semantic UI Search Types</ h4 > < hr > < br /> < div class = "ui search" > < div class = "ui icon input" > < input class = "prompt" type = "text" placeholder = "Search Names" > < i class = "search icon" ></ i > </ div > < div class = "results" ></ div > </ div > </ div > </ body > </ html > |
Output:
Example 2: In the below example, we have created a local search.
HTML
<!DOCTYPE html> < html > < head > < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> < 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" > < h2 class = "ui green header" > w3wiki </ h2 > < h4 >Semantic UI Search Types</ h4 > < hr > < br /> < div class = "ui search" > < div class = "ui icon input" > < input class = "prompt" type = "text" placeholder = "Search Names" > < i class = "search icon" ></ i > </ div > < div class = "results" ></ div > </ div > </ div > < script > const names = [ { title: 'Praneeth' }, { title: 'Tondepu' }, { title: 'Tej' }, { title: 'Pranav' }, { title: 'Srinivas' }, { title: 'Srihita' }, { title: 'Annie' }, ] $('.ui.search').search({ source: names }); </ script > </ body > </ html > |
Output:
Example 3: In the below example, we have created a local categorical search.
HTML
<!DOCTYPE html> < html > < head > < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> < 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" > < h2 class = "ui green header" >w3wiki</ h2 > < h4 >Semantic UI Search Types</ h4 > < hr > < br /> < div class = "ui search" > < div class = "ui icon input" > < input class = "prompt" type = "text" placeholder = "Search Names" > < i class = "search icon" ></ i > </ div > < div class = "results" ></ div > </ div > </ div > < script > const names = [ { category: "Pigs", title: 'Praneeth' }, { category: "Mouse", title: 'Tondepu' }, { category: "Mouse", title: 'Tej' }, { category: "Pigs", title: 'Pranav' }, { category: "Lions", title: 'Srinivas' }, { category: "Lions", title: 'Srihita' }, { category: "Mouse", title: 'Annie' }, ] $('.ui.search').search({ type: 'category', source: names }); </ script > </ body > </ html > |
Output:
Example 4: In the below example, we have created a category search and searched for the nationality of a person based on their name using the nationality API.
HTML
<!DOCTYPE html> < html > < head > < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> < 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" > < h2 class = "ui green header" >w3wiki</ h2 > < h4 >Semantic UI Search Types</ h4 > < hr > < br /> < div class = "ui category search" > < div class = "ui icon input" > < input class = "prompt" type = "text" placeholder = "Search Nationality" > < i class = "search icon" ></ i > </ div > < div class = "results" ></ div > </ div > </ div > < script > $('.ui.search') .search({ apiSettings: { url: 'https://api.nationalize.io?name={query}' }, fields: { results: 'country', title: 'country_id', probability: 'probability' }, minCharacters: 3 }); </ script > </ body > </ html > |
Output:
Reference: https://semantic-ui.com/modules/search.html
Contact Us