Auto complete or text input using semantic-ui-structure and ajax request
I am using the semantic-ui framework to create a simple search form that takes advantage of the automatic full info generated by the api call via an ajax request.
Server endpoint generates a simple JSON array
eg. http://data.nzor.org.nz/names/lookups?query=lu
gives
["Lubbockia", "Lubbockia aculeata", "Lubbockia squillimana", "Lucanidae"]
I can see that the search is doing the query, but I'm not sure how to get the results to display.
I 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've tried various options, but have now moved it back to the main settings above so as not to confuse the question. The documentation is pretty good ( http://semantic-ui.com/modules/search.html ) but I can't figure out how to get it to work.
I would prefer not to modify the api answer if it helps him.
source to share
I also had a problem with the semantic interface api.
So after some research I found out that it can be used like this:
I am also using Ruby on Rails.
jQuery File for autocomplete city 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 "results" as root and nodes with childs content with title and description and others specified by the api. Therefore, if you had a json result with different names, you need to change the call to the search function method.
Because of this, I changed results
to cities
, title
to name
and description
to state
.
In my controller, I just made a request like this:
def autocomplete
@cities = City.includes(:state).order(:name).where('name like ?', "%#{params[:query]}%")
end
In my routes file, I specify a get method that returns a collection.
# Resources for cities.
resources :cities, only: :index do
get :autocomplete, :on => :collection
end
And using the Rabl
gem I format the json file output:
collection @cities, root: :cities , object_root: false
attributes :id, :name
node(:state) { |city| city.state.name }
node(:query) { params[:query] }
That's it, it works for me.
source to share
Now the server responds with XML data for the request http://data.nzor.org.nz/names/lookups?query=lu . This 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>
source to share
The module code search
semantics requires as an object response.success
, and response.results
inresponse
For example, line 1050, if(response.results !== undefined) {
It is not clear in the API description if you can modify the answer before using the semantics. The callback onSuccess: function() {
described in http://semantic-ui.com/behaviors/api.html#/usage can be used
But I'm skeptical ...
source to share