This translation is only % complete!
We need your help to make Semantic available to people who speak your language.
Our translation tools are easy to use and allow you to translate text without having to leave the site.
Types
Standard
A search can display a set of results
Category
A search can display results from remote content ordered by categories
Local Search
A search can look for results inside static local content.
$('.ui.search')
.search({
source: content
})
;
var content = [
{ title: 'Andorra' },
{ title: 'United Arab Emirates' },
{ title: 'Afghanistan' },
{ title: 'Antigua' },
{ title: 'Anguilla' },
{ title: 'Albania' },
{ title: 'Armenia' },
{ title: 'Netherlands Antilles' },
{ title: 'Angola' },
{ title: 'Argentina' },
{ title: 'American Samoa' },
{ title: 'Austria' },
{ title: 'Australia' },
{ title: 'Aruba' },
{ title: 'Aland Islands' },
{ title: 'Azerbaijan' },
{ title: 'Bosnia' },
{ title: 'Barbados' },
{ title: 'Bangladesh' },
{ title: 'Belgium' },
{ title: 'Burkina Faso' },
{ title: 'Bulgaria' },
{ title: 'Bahrain' },
{ title: 'Burundi' }
// etc
];
States
Loading
A search can show a loading indicator
Variations
Fluid
A search can have its results take up the width of its container
Aligned
A search can have its results aligned to its left or right container edge
Examples
Initializing
Automatic Routing
By default search will automatically route to the named API endpoint 'search'
// initializes with default endpoint /search/{query}
$('.ui.search')
.search({
type: 'category'
})
;
Named URL
You can specify custom API settings to adjust the url, callback settings, or specify a different api action.
// initializes with default endpoint /search/{query}
$('.ui.search')
.search({
apiSettings: {
url: 'custom-search/?q={query}'
},
type: 'category'
})
;
Local Object
Local search results allow you to search across specified properties of a javacript object literal looking for matching values
You can set which fields are searchable using the searchFields setting. Local object search can only display standard search results (not categories).
// searches across any array/object of searchable objects
var
content = [
{
title: 'Horse',
description: 'An Animal',
},
{
title: 'Cow',
description: 'Another Animal',
}
]
;
$('.ui.search')
.search({
source : content,
searchFields : [
'title'
],
searchFullText: false
})
;
Server Responses
Standard
{
"results": [
{
"title": "Result Title",
"url": "/optional/url/on/click",
"image": "optional-image.jpg",
"price": "Optional Price"
"description": "Optional Description"
},
{
"title": "Result Title",
"description": "Result Description"
}
],
// optional action below results
"action": {
"url": '/path/to/results'
"text": "View all 202 results"
}
}
Category
{
"results": {
"category1": {
"name": "Category 1",
"results": [
{
"title": "Result Title",
"url": "/optional/url/on/click",
"image": "optional-image.jpg",
"price": "Optional Price"
"description": "Optional Description"
},
{
"title": "Result Title",
"url": "/optional/url/on/click",
"image": "optional-image.jpg",
"price": "Optional Price"
"description": "Optional Description"
}
]
},
"category2": {
"name": "Category 2",
"results": [
{
"title": "Result Title",
"url": "/optional/url/on/click",
"image": "optional-image.jpg",
"price": "Optional Price"
"description": "Optional Description"
}
]
}
}
// optional action below results
"action": {
"url": '/path/to/results'
"text": "View all 202 results"
}
}
Behaviors
All the following behaviors can be called using the syntax:
$('.your.element')
.search('behavior name', argumentOne, argumentTwo)
;
| Behavior | Description |
|---|---|
| query | Search for value currently set in search input |
| display message(text, type) | Displays message in search results with text, using template matching type |
| cancel query | Cancels current remote search query |
| search local(query) | Search local object for specified query and display results |
| search remote(query) | Search remote endpoint for specified query and display results |
| search object(query, object) | Search object for specified query and return results |
| cancel | Cancels current remote search request |
| is focused | Whether search is currently focused |
| is visible | Whether search results are visible |
| is empty | Whether search results are empty |
| get value | Returns current search value |
| get result(value) | Returns JSON object matching search value |
| set value(value) | Sets search input to value |
| read cachedHTML(query) | Reads cached results for query |
| write cachedHTML(query) | Writes cached results for query |
| add results(html) | Adds html to results and displays |
| show results | Shows results container |
| hide results | Hides results container |
| generate results(response) | Generates results using parser specified by settings.template |
| destroy | Removes all events |
Search
Behavior
| Default | Description | |
|---|---|---|
| apiSettings |
{
action: 'search'
}
|
Settings for API call. |
| minCharacters | 1 | Minimum characters to query for results |
| transition | fade | Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions |
| duration | 300 | Duration of animation events |
| maxResults | 7 | Maximum results to display when using local and simple search, maximum category count for category search |
| cache | true | Caches results locally to avoid requerying server |
| source | false | Specify a javascript object which will be searched locally |
| searchFullText | true | Return local results that match anywhere inside your content |
| searchFields |
[
'title',
'description'
]
|
Specify object properties inside source object which will be searched |
| hideDelay | 0 | Delay before hiding results after search blur |
| searchDelay | 100 | Delay before querying results on inputchange |
| easing | easeOutExpo | Easing equation when using fallback javascript animation |
Callbacks
| Context | Description | |
|---|---|---|
| onSelect(result, response) | module | Callback on element selection by user. The first parameter includes the filtered response results for that element. The function should return false to prevent default action (closing search results and selecting value). |
| onResultsAdd(html) | module | Callback after processing element template to add html to results. Function should return false to prevent default actions. |
| onSearchQuery | module | Callback on search query |
| onResults(response) | module | Callback on server response |
| onResultsOpen | results element | Callback when results are opened |
| onResultsClose | results element | Callback when results are closed |
Module
These settings are native to all modules, and define how the component ties content to DOM attributes, and debugging settings for the module.
| Default | Description | |
|---|---|---|
| name | Search | Name used in log statements |
| namespace | search | Event namespace. Makes sure module teardown does not effect other events attached to an element. |
| selector |
selector : {
prompt : '.prompt',
searchButton : '.search.button',
results : '.results',
category : '.category',
result : '.result'
}
|
Selectors used to find parts of a module |
| className |
className: {
active : 'active',
empty : 'empty',
focus : 'focus',
loading : 'loading',
pressed : 'down'
}
|
Class names used to determine element state |
| debug | false | Debug output to console |
| performance | true | Show console.table output with performance metrics |
| verbose | false | Debug output includes all internal behaviors |
| errors |
error : {
source : 'Cannot search. No source used, and Semantic API module was not included',
noResults : 'Your search returned no results',
logging : 'Error in debug logging, exiting.',
noTemplate : 'A valid template name was not specified.',
serverError : 'There was an issue with querying the server.',
maxResults : 'Results must be an array to use maxResults setting',
method : 'The method you called is not defined.'
},
|
|