CODEWITHSUNDEEP
jquerysearchsemantic-ui
msj121
msj121

Reputation: 2842

Search Module in Semantic-UI

Does anyone have an example of using Semantic-UI's search module?

An Issue says there will be documentation, and here is the Module

HTML:

<form action="/web/quickSearch" class="ui search" method="GET">
<div class="ui input">
    <input type="text" placeholder="Search..." autocomplete="off" name="query" class="prompt">
</div>
<div class="results"></div>
<div class="ui green button" style="padding:0.8em 1.5em;margin-top:-1px;margin-left:-25px;float:none;">Search</div>

I am calling it very simply:

$(".ui.search").search("/web/quickSearch");

It does actually call GET, but it doesn't append the query at all, though I see it in the .api as part of "urlData", what else do I need to add to wire this properly?

Any ideas?

Upvotes: 2

Views: 9185

Answers (2)

Ricardo Emerson
Ricardo Emerson

Reputation: 906

I too had problem with the seach api of the Semantic-UI.

So after some researchs, i learned that it can be used this way:

I am using Ruby on Rails also.

jQuery File to autocomplete cities names:

# Semantic-Ui Search
# Sets for autocomplete name of cities while typing.
$('.ui.search.city').search
  apiSettings: 
    action: 'search', url: '/cities/autocomplete.json?query={query}'
  fields:
    results : 'cities'
    title   : 'name'
    description   : 'state'
  minCharacters : 3

Semantic-UI (search) expects a "results" as root and nodes with childs content with title and description, and others that api specify. So if you had json result with other names, then you have to change in the method call of searc function.

Because of this, i changed results for cities, title for name and description to state.

In my Controller i just made a query like this:

def autocomplete    
  @cities = City.includes(:state).order(:name).where('name like ?', "%#{params[:query]}%")
end

In my Routes file i specify the get method that return a collection.

# Resources for cities.
resources :cities, only: :index do
  get :autocomplete, :on => :collection
end

And using the Rabl gem i format the output of json file:

collection @cities, root: :cities , object_root: false

attributes :id, :name
node(:state) { |city| city.state.name }
node(:query) { params[:query] }

Thats it's all, it works for me.

Upvotes: 4

Jack
Jack

Reputation: 464

I recommend using the latest version of search.js and api.js

https://github.com/Semantic-Org/Semantic-UI/blob/css/src/definitions/behaviors/api.js https://github.com/Semantic-Org/Semantic-UI/blob/css/src/definitions/modules/search.js

API lets you create endpoints with url templating, this allows you to specify your API in one place, and have url variables be replaced at run-time.

For example on a recent project I used an API map like this

  $.api.settings.api = {
    emailArticle     : '/api/article/ajax/{id}',
    getArticles      : '/api/article/{type}/{date}/{limit}/{/page}/{/filter}/',
    homepageArticles : '/api/featured/{homepageID}/{lastID}',
    latestArticles   : '/api/next/{offset}',
    search           : '/api/search/{query}'
  }

URL templating works using string templating for variable parts of a URL.

  • You can specify required parameters with {$variable} or {variable}, your preference.
  • You can specify optional parameters with {/$variable} or {/variable}.

Required variables will return an error if not included at run time. Optional variables will automatically remove themselves (and any trailing slash) from url if not specified.

API has many other uses outside of search, setting minimum request time, attaching load states to elements, allowing html metadata be passed as parameters, etc. But these are outside the scope of the question.

With the search component. It will default to using the search API action if none is specified.

This action requires a url to include {$query} where the query parameter should be mapped to.

In your example you can either set a default search endpoint globally:

For instance if you wanted it to be passed by GET, you could use

$.api.settings.api.search = 'search/?q={$query}'

Or you can specify custom API settings for the module $('.ui.search').search({ apiSettings: { url: '/search/{$query}' } });

Upvotes: 2

Related Questions