ansaurus

Question

jQuery and Grails/HTML - Make text field complete text like Google does

Answer 1

+3 A:

You will probably want to look into the jQueryUI Autocomplete widget. It has several ways of providing lists of suggestions, and there will almost certainly be something in there that will work for you.

Here's a very basic demo: http://jsfiddle.net/QU9st/

Here's the source for that:

$(function() {
    var data = "General Commodity,General Store,General Custer,General Mills".split(",");
    $("#commodity").autocomplete({
            source: data
        });
});

That demo simply uses a static string array as the datasource, but you can also use remote datasources, in formats like JSON or XML.

To get it, just drop this somewhere in your <head> tag:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"&gt;&lt;/script&gt;

Of course, you will also need to include jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;

Ender 2010-10-06 17:16:05

That is exactly what I'm looking for. Do I need to install the jquery-ui plugin for Grails?

fgualda87 2010-10-06 17:35:01

Yes, you need to specifically include jQueryUI on your page. You can download it from their site or grab a link to it from Google's code repository here: http://code.google.com/apis/libraries/devguide.html

Ender 2010-10-06 17:40:52

How do I install jQuery UI in Grails?

fgualda87 2010-10-06 21:32:33

You don't really "install" it. It's a javascript library, just like jQuery. You just have to include it on your page with a script tag.

Ender 2010-10-06 21:34:20

And put it where? Because I know there is a jQuery UI Plugin for Grails, but I'm not sure if it is the same http://www.grails.org/plugin/jquery-ui

fgualda87 2010-10-06 21:42:16

Like, I don't know if I really need to install the plugin, or just download the js library and put it somewhere.

fgualda87 2010-10-06 21:45:29

Ah, I see. Admittedly, I don't know anything about Grails, but yes, I think that the plug-in you linked will suit your needs. You shouldn't really need the plug-in though. Probably the easiest thing to do is just link to the copy of it that Google hosts. I'll edit my answer to show how that's done.

Ender 2010-10-06 21:46:18

For some reason is not working... Maybe I'm doing something wrong... I'll update the question with some code so you can see

fgualda87 2010-10-08 14:36:22

Have you also included jQuery? See my updated answer.

Ender 2010-10-08 15:08:39

Yes, I have other jQuery functions working. Specially on (document).ready

fgualda87 2010-10-08 15:24:45

But again, I don't need that, by installing the plugin and putting the tag <g:javascript library="jquery" plugin="jquery" /> It loads the jQuery plugin, which is the same as putting it the HTML way. But that's why I'm having problems with the jQuery UI plugin, because UI is a plugin of jQuery.

fgualda87 2010-10-08 15:26:41

It looks like you haven't wrapped the call to autocomplete in $(function() { }); (which is the shorthand for (document).ready). Perhaps that is the problem?

Ender 2010-10-08 15:31:33

The thing is that Grails has the prototype library by default, and by using the $(function{} ..... ) it reads the prototype $, not the jQuery one. I'll check and let you know.

fgualda87 2010-10-08 18:03:58

No, it loads perfectly, like no errors on the page, but nothing happens when I write in the txtfield :/

fgualda87 2010-10-08 18:14:20

$ is just an alias for jQuery, so you can do jQuery(function() { }); as well.

Ender 2010-10-08 18:14:36

I know, I read that somewhere too. But no. I changed it and nothing is happening :S

fgualda87 2010-10-08 18:38:41

I'm all out of ideas then :( Sorry!

Ender 2010-10-08 18:43:07

I think I know what the problems is. Because I'm using grails and it creates a list of objects, and all the elements in the list are textfields so I had two with the same name, the creating one, and the first one on the list. Lemme see if its that. Thanks!

fgualda87 2010-10-08 19:26:27

OK :D!!!! I got it to work, but it doesn't work on the first one. I think is a conflict with the IDs.

fgualda87 2010-10-08 19:41:48

Answer 2

+1 A:

jQuery has an Autocomplete widget That can get it to do what you want it to do. here's an example: jQuery:

var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax".split(" ");
$("#commodity").autocomplete(data);

html:

<input type="text" id="commodity" name="commodity">

GSto 2010-10-06 17:19:13

Do I need to install jQuery-UI plugin for Grails, or it comes already with the jQuery plugin?

fgualda87 2010-10-06 17:35:45

This is seperate from jQueryUI, and doesn't require any further installation besides the plug in itself. that's why I included a different answer from @Ender

GSto 2010-10-06 17:56:37

For some reason is throwing an error :/

fgualda87 2010-10-06 20:43:42

The plug-in is deprecated. The jQueryUI is the successor of this plug-in.

Ender 2010-10-06 21:18:43

ansaurus

tags:

views:

answers:

jQuery and Grails/HTML - Make text field complete text like Google does

related questions