new control available: hjq-combobox

51 views
Skip to first unread message

Bryan Larsen

unread,
Jun 17, 2011, 10:53:20 AM6/17/11
to Hobo Users
I've added a new control to the rails3 branch of hobo-jquery.

https://github.com/bryanlarsen/hobo-jquery/commit/f4c38038d323ec0326a7d6974185c275df1b0879

Here's the documentation:

Creates an enhanced version of the [jQuery-UI demo
combobox](http://jqueryui.com/demos/autocomplete/#combobox). This
will turn any select (even a select-many) into a combobox.

NOTE: backwards compatibility with the Hobo&Rails prototype/lowpro
handlers requires event.simulate.js. You may need to rerun your
hobo_query:install generator to copy this file into your application.

Standard usage:

<hjq-combobox>
<select .../>
</hjq-combobox>

If you don't supply the select, it will use Hobo's `<input>` tag.
This is usually the right default.

You can tell Hobo to always use a combobox for select-one,
select-many, select-input and/or select-menu.

<extend tag="select-one">
<hjq-combobox tag="select-one">
<old-select-one merge/>
</hjq-combobox>
</extend>

To make the behavior more like the demo's, turn off autoFill & clearButton:

<hjq-combobox autoFill="&false" clearButton="&false"/>

Combobox is a new control that is built on autocomplete. The
autocomplete options may not be used directly. If you need any of
them let me know -- they shouldn't be too hard to add if you volunteer
to test them.

### Attributes

- `autoFill` (default: true): select first value rather than clearing
if there's a match

- `clearButton` (default: true): add a "clear" button

- `adjustWidth` (default: true): if true, will set the autocomplete
width the same as the old select. (requires jQuery 1.4.4 to work on
IE8)

- uiStyle (default: false): if true, will add classes so that the
autocomplete input takes a jQuery-UI style. If false, the standard
Hobo style is used.

### Events

- `selected` (default: `$(this).simulate('change');`): this is a
jQuery-UI event handler. The default value for this option fires the
`onchange` handler on the underlying `select` in a manner compatible
with both prototype.js and jQuery. For this to work,
event.simulate.js must be loaded, and jQuery must be put into
noConflict mode. hobo-jquery should be doing both of these for you if
you are using it as recommended in the README.

cheers,
Bryan

Ignacio Huerta

unread,
Jun 19, 2011, 12:47:23 AM6/19/11
to hobo...@googlegroups.com
-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

Thank you Bryan!

This control looks very nice, I'll certainly try it in a couple of big
selects I wanted to change :)

Regards,
Ignacio

El 17/06/11 16:53, Bryan Larsen escribi�:

- --
Ignacio Huerta Arteche
http://www.ihuerta.net
Tel�fono: 0034 645 70 77 35
Email realizado con software libre
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.10 (GNU/Linux)
Comment: Using GnuPG with Mozilla - http://enigmail.mozdev.org/

iEYEARECAAYFAk39f1kACgkQBPlUJ6RHaORu9QCdG77LhePh33+im46DC8q/M83F
/QAAn0C76/oPpiutZNGWCQxOoxkg8AvX
=+r3b
-----END PGP SIGNATURE-----

ylluminate

unread,
Jun 28, 2011, 4:56:18 PM6/28/11
to Hobo Users
Bryan, this is really great work and timely. Thank you. It seems
that it does fill the need I'd discussed here (http://
groups.google.com/group/hobousers/browse_thread/thread/
58c61b1612c12267) when I said this:

There were fields such as "Elementary School" and "Heating System"
where they were simply table attributes and not actual children to a
parent table. The way it worked was that there was a special control
via javascript that was a textfield with a drop down. This control
would query the db so as to pull all, for example, "Cooling System"
entries from all "Cooling System" attributes in the table to populate
the drop down and allow an autofill as the user typed of the correct
entry if one already existed. The reason this is useful is that
these
items could change pretty regularly. A modern control that would
currently fit this bill is: http://coffeescripter.com/code/editable-select/
Is this currently possible with Hobo?
-- END SNIPPET --

Could you perhaps proffer an example of populating the select as per
the above description?

Again, really appreciate this.


-George



On Jun 19, 12:47 am, Ignacio Huerta <igna...@ihuerta.net> wrote:
> -----BEGIN PGP SIGNED MESSAGE-----
> Hash: SHA1
>
> Thank you Bryan!
>
> This control looks very nice, I'll certainly try it in a couple of big
> selects I wanted to change :)
>
> Regards,
> Ignacio
>
> El 17/06/11 16:53, Bryan Larsen escribi :
>
>
>
>
>
>
>
>
>
> > I've added a new control to the rails3 branch of hobo-jquery.
>
> >https://github.com/bryanlarsen/hobo-jquery/commit/f4c38038d323ec0326a...
> Ignacio Huerta Artechehttp://www.ihuerta.net
> Tel fono: 0034 645 70 77 35
> Email realizado con software libre
> -----BEGIN PGP SIGNATURE-----
> Version: GnuPG v1.4.10 (GNU/Linux)
> Comment: Using GnuPG with Mozilla -http://enigmail.mozdev.org/

ylluminate

unread,
Jun 29, 2011, 12:38:02 AM6/29/11
to Hobo Users
Bryan, looks like the JQuery folks are developing an core control for
this so I thought that this was good news: http://wiki.jqueryui.com/w/page/12138056/Selectmenu



On Jun 17, 10:53 am, Bryan Larsen <br...@larsen.st> wrote:
> I've added a new control to the rails3 branch of hobo-jquery.
>
> https://github.com/bryanlarsen/hobo-jquery/commit/f4c38038d323ec0326a...

Bryan Larsen

unread,
Jun 29, 2011, 8:27:30 AM6/29/11
to hobo...@googlegroups.com
Cool. It won't replace combobox, but it will be useful.

By the way, the biggest reason why hobo-jquery only contains a subset
of jQuery-UI is because I personally do not have a use for the widget.
And since an untested widget is a broken widget, it's not in
hobo-jquery.

But if anybody is willing to help with development & testing, most
jQuery-UI and plugin widgets are not hard to add to jQuery-UI.

Bryan

> --
> You received this message because you are subscribed to the Google Groups "Hobo Users" group.
> To post to this group, send email to hobo...@googlegroups.com.
> To unsubscribe from this group, send email to hobousers+...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/hobousers?hl=en.
>
>

Bryan Larsen

unread,
Jun 29, 2011, 8:40:12 AM6/29/11
to hobo...@googlegroups.com
Can the users enter a value different from the one in the drop down?
If so, you want hjq-autocomplete. If not, you want hjq-combobox.

If they cannot enter new values, I suggest changing your schema to add
ElementarySchool and HeatingSystem models. Then you would
automatically get a select-one element, which you can convert to
hjq-combobox by using <hjq-combobox/> instead of <input/>.

If they can enter new values, then your current schema makes sense.

<hjq-autocomplete source="&ModelName.all.*.elementary_school.uniq"/>

(This could be made more efficient if you got the database to do the
uniqifying).

Bryan

Reply all
Reply to author
Forward
0 new messages