CODEWITHSUNDEEP
jqueryjsongrails
Sachin Verma
Sachin Verma

Reputation: 3802

Autocomplete with JQuery plugin

I want to get JSON response from a URL and use it as autocomplete feature but i could not understand how to receive that JSON array.
i want to put the response to a jQuery plugin.

$('#tags').tagsInput({    
  autocomplete_url:'http://myserver.com/api/autocomplete',
  autocomplete:{selectFirst:true,width:'100px',autoFill:true}
});

my grails action that will be used as url:

def getCategories() {
        def categories=Categories.executeQuery("select name from Categories where name like '%"+params.term+"%'",[max:10]);
        JSONArray catArray = new JSONArray(categories);
        render  model:[catArray:catArray]
    }

Now i want that url response assigned to autocomplete_url. Although when i use a manual array that works fine:

$('#tags').tagsInput({    
  autocomplete_url:myJsonArray,
  autocomplete:{selectFirst:true,width:'100px',autoFill:true}
});

Upvotes: 0

Views: 116

Answers (1)

user800014
user800014

Reputation:

Without knowing the JQuery plugin name, I'm assuming that autocomplete_url can be an url or a JSON. If you want to set the JSON directly, you need to do it in one action:

action

def show() {
  ...
  def categories=Categories.executeQuery("select name from Categories where name like '%"+params.term+"%'",[max:10]);
  String jsonCateg = categories as JSON //transforms your query result to array.
  render view: 'show', model: [domainInstance: domainInstance, jsonCateg: jsonCateg]
  ...
}

view

$('#tags').tagsInput({    
  autocomplete_url:${jsonCateg},
  autocomplete:{selectFirst:true,width:'100px',autoFill:true}
});

If you want to set the url of your action, use the createLink tag:

$('#tags').tagsInput({    
  autocomplete_url: '${createLink(controller: "myController", action:"getCategories")}',
  autocomplete:{selectFirst:true,width:'100px',autoFill:true}
});

And the controller action should render the JSON directly:

def getCategories() {
    def categories=Categories.executeQuery("select name from Categories where name like '%"+params.term+"%'",[max:10]);
    render categories as JSON
}

Upvotes: 1

Related Questions