?

Log in

No account? Create an account
Tag autocomplete in JavaScript - brad's life [entries|archive|friends|userinfo]
Brad Fitzpatrick

[ website | bradfitz.com ]
[ userinfo | livejournal userinfo ]
[ archive | journal archive ]

Tag autocomplete in JavaScript [Oct. 4th, 2005|03:26 pm]
Brad Fitzpatrick
[Tags|, , ]

Two exciting things...

Tag auto-complete working in IE:
Please check out the tag autocomplete demo:

http://danga.com/demo/tagcomplete/

Known to work in Firefox 1.0.x, Firefox 1.5.x, and IE 6.0.
Won't work in Safari due to Safaril limitations.

Let me know if it works in anything else (Opera?) or if you find any problems in any of the known-working browsers.

Six Apart and open source
Also of note: my employer, Six Apart, has agreed to open source the following JavaScript libraries:

http://danga.com/demo/tagcomplete/core.js
http://danga.com/demo/tagcomplete/dom.js
http://danga.com/demo/tagcomplete/selectionrange.js

Cooperatively they form a sort of compatibility layer for all major browsers to behave as the W3C says they should.

Ben's historically put a bunch of stuff on CPAN but I believe this is the first time that they've open sourced JavaScript (or any non-Perl) code. I argued that open sourcing JavaScript is the easiest possible decision because you can't control its spread anyway (the browser needs it to run), so you might as well reap the benefits of open source anyway, as long as you're making it available.

The three files above aren't really documented, but are pretty useful. I started using them in this tagcomplete project, but not as much as I could.... still got some reading/tinkering to do until I learn all the stuff in them.

The IE support in tagcomplete, though, (finding the selected region of a text input) was accelerated greatly by using some code from selectionrange.js. It didn't work for me as is, so I forked it for now, but I'll figure it out and get patches back to Randy to include in future version.

That's actually how getting Six Apart to open source these came out: I was asking Randy how to find the selection range of a text input in IE and showed him some ghetto code I'd started playing with (duplicating text ranges and sliding them around and comparing them) and he smiled and said, "Yup. That's right." and told me he'd already done it (in selectionrange.js). Then I decided I didn't want to waste my time doing something that'd already been done so I asked him and Ben if we could open source the above files, and uh, there they are. Enjoy.
LinkReply

Comments:
[User Picture]From: dakus
2005-10-04 10:36 pm (UTC)
worked for me. cool on the open source too!!
(Reply) (Thread)
[User Picture]From: ydnar
2005-10-04 10:46 pm (UTC)

docs

Sorry about that...
(Reply) (Thread)
[User Picture]From: brad
2005-10-04 10:52 pm (UTC)

Re: docs

You built it for you, so it's understandable. I'll just bug you daily with questions while I flesh out the docs. :-)
(Reply) (Parent) (Thread)
[User Picture]From: killhamster
2005-10-04 10:49 pm (UTC)
auto-complete works in opera 8.5 as well.
(Reply) (Thread)
[User Picture]From: brad
2005-10-04 10:54 pm (UTC)
Yeah, but not correctly. I just tried it, and pressing the comma key kills the auto-completed selection. Try it in Firefox and IE and see how it's supposed to work.

I'll work on improving the Opera support.
(Reply) (Parent) (Thread)
[User Picture]From: brad
2005-10-04 10:55 pm (UTC)
And it doesn't work on the second tag in a series.
(Reply) (Parent) (Thread)
[User Picture]From: killhamster
2005-10-04 10:57 pm (UTC)
i was just hitting tab, didn't think about the comma bit. i was just happy to see something work in an underappreciated browser.
(Reply) (Parent) (Thread)
[User Picture]From: brad
2005-10-04 11:13 pm (UTC)
Okay, Opera's all fixed now. Works perfectly.
(Reply) (Parent) (Thread)
[User Picture]From: killhamster
2005-10-04 11:19 pm (UTC)
so this is going in the web client interface for tags?
(Reply) (Parent) (Thread)
[User Picture]From: brad
2005-10-04 11:32 pm (UTC)
Both on LiveJournal and FotoBilder (Scrapbook), whereever you can enter tags.
(Reply) (Parent) (Thread)
[User Picture]From: troworld
2005-10-04 11:35 pm (UTC)
Hitting comma doesn't autocomplete the tag, just adds a comma and a space at cursor.

Pretty awesome nevertheless.
(Reply) (Parent) (Thread)
[User Picture]From: brad
2005-10-04 11:45 pm (UTC)
What Opera? It works in Opera 8.5, which is all I (hardly) give a shit about, since it's the first one that doesn't have ads all over it.

I used to never care, but now that I can debug it without being insulted with ads, I'll try to keep things working in Opera.
(Reply) (Parent) (Thread)
[User Picture]From: troworld
2005-10-05 01:58 am (UTC)
8.5 (linux) is what I'm running here. Here's a flash cap of it.
(Reply) (Parent) (Thread)
From: evan
2005-10-04 11:18 pm (UTC)
(Reply) (Thread)
From: evan
2005-10-04 11:19 pm (UTC)
er, misfired: meant to describe that as well.
http://www.openjsan.org/ -- like cpan, but for javascript.
(Reply) (Parent) (Thread)
[User Picture]From: brad
2005-10-04 11:31 pm (UTC)
Yeah, I went to that talk at OSCON. Was excited to see it run by Perl people, too.

I'll try and dump all this code there, once I figure out the scene/rules/packaging requirements.
(Reply) (Parent) (Thread)
[User Picture]From: jeremyleff
2005-10-05 12:08 am (UTC)
Thanks for this. I've been trying to work on an HTML Combo Box (with auto-complete) for a while but haven't been able to come up with anything that functions as good as the Windows Forms combo box. This should be a big help.
(Reply) (Parent) (Thread)
From: evan
2005-10-05 01:06 am (UTC)
oh, and for your "core.js" you should check out http://prototype.conio.net/ .

there's a large community built around these sorts of frameworky js utilities. see, like http://dojotoolkit.org/ , etc.
(Reply) (Thread)
[User Picture]From: brad
2005-10-05 01:22 am (UTC)
I knew of prototype, and dojo rings a bell, but I don't know either that well.

I imagine I'll be getting a lot more familiar with them soon here, though.
(Reply) (Parent) (Thread)
[User Picture]From: dossy
2005-10-05 02:23 am (UTC)

BSD license? Yay!

Looks like the license that was used by Six Apart is the BSD license? THANK YOU! Was afraid there would be some GPL or LGPL nonsense.

Is Six Apart or any of its subsidiary companies looking to hire someone telecommute from New Jersey? :-P
(Reply) (Thread)
[User Picture]From: brad
2005-10-05 03:05 am (UTC)

Re: BSD license? Yay!

Sorry, no new telecommuters.
(Reply) (Parent) (Thread)
(Deleted comment)
[User Picture]From: brad
2005-10-05 06:17 am (UTC)
The point of a tag is you're supposed to just know it, and be able to type it easier. A drop-down menu would get in the way, IMO, and you could probably type it quicker than a drop-down would appear, with today's slow browsers. I might add it, but only if you've stopped typing for a second or so.

I just tried Google Suggest and it doesn't work in Safari 1.3 at least. Don't have Tiger at home, it seems, so I'll have to wait and try it out tomorrow.

As far as I know, though, Safari doesn't let you get/set the selection in a text widget. So yeah, a drop-down would be possible, but the "hit comma to accept the automatic selection" wouldn't be possible in Safari.
(Reply) (Parent) (Thread)
[User Picture]From: perlmonger
2005-10-05 11:25 am (UTC)
Not had time to look yet myself, but I thought that Safari >= 1.3 did have support for selection mangling? Frederico is trying to get help for porting FCKeditor to Safari which would imply that the hooks are there now.

Oh, for more tuits...
(Reply) (Parent) (Thread)
[User Picture]From: brad
2005-10-05 03:19 pm (UTC)
On page text, but not in a text widget I believe. Or you can get the text widget's selection text, but not ask for the selected indexes (from char 5 to 8) no change the selected indexes in a text widget.
(Reply) (Parent) (Thread)