Semantic-UI Search
Semantic UI is a front-end programming framework for theming comparable to Bootstrap. It’s a CSS and jQuery-based open-source framework. It includes pre-built semantic elements that aid in creating attractive, responsive, and flexible layouts using HTML.
The Search module in Semantic UI allows a user to query a data set for results. A collection of results can be displayed as a consequence of a search. A search can return results from distant material that are organized by category. Within a static local source, a search can seek results.
- Standard: This search type can be used to create a search box of standards type & can be used to display the list of output.
- Category: This search type can be used to create a search box that displays results ordered by categories.
- Local Search: This search option can be used to display the set of results within the local source statically.
- Local Category Search: This search option can be used to categories the results within the local source statically.
- loading: This class is act as an indicator that is used to display the loading status.
Syntax:
<div class="ui search"> <input class="prompt" type="text"> </div>
Example 1: This example illustrates the Semantic UI Search Types.
- Standard Search:
HTML
<!DOCTYPE html> < html > < head > < title > Semantic-UI Search Standard Type </ title > < 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 center aligned" > < h2 class = "header ui green" > w3wiki </ h2 > < h3 >Semantic-UI Search </ h3 > < div class = "ui search" > < input class = "prompt" type = "text" placeholder = "Search for articles..." > < div class = "results" ></ div > </ div > </ div > </ body > </ html > |
Output:
- Local Search Type:
HTML
<!DOCTYPE html> < html > < head > < title > Semantic-UI Search Standard Type </ title > < 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 > < center > < div class = "ui container" > < h2 class = "header ui green" > w3wiki </ h2 > < h3 >Semantic-UI Search</ h3 > < p >Local Search Type</ p > < div class = "ui search" > < div class = "ui icon input" > < input class = "prompt" type = "text" placeholder = "Search for tutorials..." /> < i class = "search icon" ></ i > </ div > < div class = "results" ></ div > </ div > </ div > </ center > < script > var content = [{ title: "Python", }, { title: "Javascript ", }, { title: "Java", }, ]; $(".ui.search").search({ source: content, fullTextSearch: false, }); </ script > </ body > </ html > |
Output:
Example 2: This example illustrates the Semantic UI Search States.
HTML
<!DOCTYPE html> < html > < head > < title > Semantic-UI Search Standard Type </ title > < 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 center aligned" > < h2 class = "header ui green" > w3wiki </ h2 > < h3 >Semantic-UI Search </ h3 > < div class = "ui loading search" > < div class = "ui icon input" > < input class = "prompt" type = "text" placeholder = "Search for articles..." /> < i class = "search icon" ></ i > </ div > < div class = "results" ></ div > </ div > </ div > </ body > </ html > |
Output:
Example 3: This example illustrates the Semantic UI Search Variations.
HTML
<!DOCTYPE html> < html > < head > < title > Semantic-UI Search </ title > < 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 > < center > < h1 class = "ui green header" > w3wiki </ h1 > < h3 > Semantic UI Search Variations </ h3 > < br > < p >Disabled search</ p > < div class = "ui disabled search" > < div class = "ui icon input" > < i class = "search icon" ></ i > < input class = "prompt" type = "text" placeholder = "Search for tutorials..." /> </ div > < div class = "results" ></ div > </ div > < br > < p >Fluid search</ p > < div class = "ui fluid search" > < div class = "ui icon input" > < i class = "search icon" ></ i > < input class = "prompt" type = "text" placeholder = "Search for tutorials..." /> </ div > < div class = "results" ></ div > </ div > < br > < p >Aligned search</ p > < div class = " ui container" > < div class = "ui left aligned category search" > < div class = "ui icon input" > < i class = "search icon" ></ i > < input class = "prompt" type = "text" placeholder = "Search for tutorials..." > </ div > < div class = "results" ></ div > </ div > </ div > </ center > < script > var content = [{ title: "Python", url: description: `Python is a high-level, general-purpose and a very popular programming language.`, }, { title: "Javascript ", url: description: `JavaScript is the world most popular lightweight, interpreted compiled programming language.` }, { title: "Java", url: description: `Java is one of the most popular and widely used programming languages.` }]; $(".ui.search").search({ source: content, fullTextSearch: false, }); </ script > </ body > </ html > |
Output:
Reference: https://semantic-ui.com/modules/search.html