Auto-complete or type-ahead search box using the semantic-ui framework and an ajax request

问题

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

The server endpoint generates a simple JSON array

e.g. http://data.nzor.org.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.net/6ojkdvnn/4/

$(document)
.ready(function () {

 $('.ui.search')
  .search({
      apiSettings: {
          url: 'http://data.nzor.org.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.com/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.

回答1:

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.

回答2:

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

<ArrayOfString xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/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>

回答3:

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.com/behaviors/api.html#/usage

But I am sceptical...

来源：https://stackoverflow.com/questions/27374340/auto-complete-or-type-ahead-search-box-using-the-semantic-ui-framework-and-an-aj

标签

javascript

semantic-ui