I'm using the semantic-ui framework to create a simple search form that uses auto-plete information generated by calling an api via an ajax request.

The server endpoint generates a simple JSON array

e.g.

gives

["Lubbockia","Lubbockia aculeata","Lubbockia squillimana","Lucanidae"]

I can see the search making the request but I'm not sure how to get the results to display.

I have created a jsfiddle at /

$(document)
.ready(function () {

 $('.ui.search')
  .search({
      apiSettings: {
          url: '={query}'
      },
      debug: true,
      verbose: true
  });
});

I have tried various options but have now stripped it back to the basic settings above so as not to confuse the matter. The documentation is pretty good (.html) but I can't quite see how to make it work.

I'd prefer not change the api response if it can be helped.

I'm using the semantic-ui framework to create a simple search form that uses auto-plete information generated by calling an api via an ajax request.

The server endpoint generates a simple JSON array

e.g. http://data.nzor.nz/names/lookups?query=lu

gives

["Lubbockia","Lubbockia aculeata","Lubbockia squillimana","Lucanidae"]

I can see the search making the request but I'm not sure how to get the results to display.

I have created a jsfiddle at http://jsfiddle/6ojkdvnn/4/

$(document)
.ready(function () {

 $('.ui.search')
  .search({
      apiSettings: {
          url: 'http://data.nzor.nz/names/lookups?query={query}'
      },
      debug: true,
      verbose: true
  });
});

I have tried various options but have now stripped it back to the basic settings above so as not to confuse the matter. The documentation is pretty good (http://semantic-ui./modules/search.html) but I can't quite see how to make it work.

I'd prefer not change the api response if it can be helped.

• javascript
• semantic-ui

Share Improve this question Follow asked Dec 9, 2014 at 8:26 MikeMike 36955 silver badges1414 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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 autoplete cities names:

# Semantic-Ui Search
# Sets for autoplete name of cities while typing.
$('.ui.search.city').search
  apiSettings: 
    action: 'search', url: '/cities/autoplete.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 autoplete    
  @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 :autoplete, :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.

Now, for query http://data.nzor.nz/names/lookups?query=lu, server responds with XML data. It is not JSON.

<ArrayOfString xmlns:xsd="http://www.w3/2001/XMLSchema" xmlns:xsi="http://www.w3/2001/XMLSchema-instance">
  <string>Lubbockia</string>
  <string>Lubbockia aculeata</string>
  <string>Lubbockia squillimana</string>
  <string>Lucanidae</string>
  <string>Lucaninae</string>
  <string>Lucerapex</string>
  <string>Lucerapex angustatus</string>
  <string>Lucerne</string>
  <string>Lucerne Australian latent virus</string>
  <string>Lucerne dodder</string>
</ArrayOfString>

In search module code, semantic require both response.success and response.results object in response

For example, line 1050, if(response.results !== undefined) {

In API description, it is not clear if you can modifiy the response before uses by Semantic. May be use the callback onSuccess: function() { described at http://semantic-ui./behaviors/api.html#/usage

But I am sceptical...