Menu

Search

A search module allows a user to query for results from a selection of data

Download

Types

Standard

A search can display a set of results

Using a ui input allows you to use additional input types, like this icon input

Category

A search can display results from remote content ordered by categories

Local Search

A search can look for results inside static local content.

By default, results will return content first that begin with the query text, but also afterward content that matches the query anywhere inside. To disable full text search you can specify in settings searchFullText: false.
$('.ui.search') .search({ source: content }) ;

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

Search is built ontop of Semantic API behaviors to allow for URL templating, and UI state management. Please check out the API documentation for more information on adjusting API settings.

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

You may also consider adding a top level property like success: true and using API's successTest parameter to determine wheter a server response is actually succesful, even if it returns the correct HTTP code

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.' },

Dimmer Message
Dimmer sub-header