Search jQuery

jQuery Forum

lex1982

Several Improvements and Changes to JQueryUI Autocomplete

in Developing jQuery UI • 12 years ago

Several weeks ago I made several changes to the jqueryui autocomplete control that we need for using it in a collaboration platform (it's call "Tricia", see http://www.infoasset.de/). I expected I would want to change so many things that I have to maintain a separate fork independent of the official release anyway. However, now I saw that the new release contains one bugfix I already made (and several more I'd like to have in my version) and I'm wondering if my changes are general enough to be worth being contributed to the official version.

This is what I changed:

added a new "submit" event that also fires when users hits enter but has not selected an item from the menu. The control closes after this event. This is needed because the user should be able to enter arbitrary search terms and not be forced to choose from the suggestions
preventDefault() on keydown ENTER and NUMPAD_ENTER to prevent form submit (not sure if this is fixed in new release, might only apply to certain browsers)
keypress default behaviour is always a new search regardless of last term.This solves a minor bug related to the minlength: if you backspace under minLength and type the same again you are missing the first autocomplete because self.term still has that value (I think this is what also changed in the new official release)
fixed mouseenter/mouseover bug that selects elements when menu opens under the mouse. This is a pretty annoying behavior when you click the input control and position the mouse under the control
fixed positioning issue when aligning at right borders (changing width of menu is the problem)
added maxWidth and fixedWidth options
there may be items (suggestions) without value (label is not assigned as default). For those items only select events are fired, they cannot be submitted (see new "submit" event above)
when item.html is set, it is used for rendering

I'm not sure whether this is understandable. I'm planning to add more features like partitioning the suggestions in several sections (with small headings). Not sure wheter this will be possible anyway soon because there is progress on the menu-widget that is currently only used for autocomplete?
Feedback highly appreciated

Replies(2)

crussell52

Re: Several Improvements and Changes to JQueryUI Autocomplete

12 years ago

First off, I might be able to shed some light on some of the items which have already made their way into the most recent version (1.8.5).

preventDefault() is implemented for those keystrokes when the suggestion list is visible (same way you do it).

The bug with minLength has been fixed, and if the search term does not change, a search is not performed.

mouseover no longer causes menu item to show up in the input box.

In regards to the "submit" event, I see that you only fire it if the menu is not active. I wonder if that could be accomplished by attaching a separate listener to the input box. (More on the reason behind that later.)

In regards to the the maxWidth and fixedWidth options. Fixed width may already be achievable through CSS overrides... however maxWidth would be difficult in CSS in the cross-browser world, providing a valid use-case for the option(s).

And then we come to item.html... I think there is great use for this (I ran into a need myself not too long ago), but this brings us to "extensions".

Before I get into that, let me say that I have not taken an in-depth look at your code, so none of the above comments are meant to diminish the need for the modifications you made or as judgment to the way you accomplished them. The questions posed are simply to provoke thoughts towards alternative ways to accomplish the same thing.

Speaking of alternative ways, back to extensions... They are a concept explained by Scott Gonzales in this blog post: http://blog.jqueryui.com/2010/08/extensible-autocomplete/ . In short it is a less-invasive approach to extending the functionality of autocomplete.

There's no way I can explain it better than he did, so check out the post. It allowed me to extract the modifications I made (originally implemented in a manner similar to your changes) and re-implement in a much cleaner fashion. Here is a link to the end result: http://github.com/crussell52/jquery-ui-extensions, and related post: http://forum.jquery.com/topic/autocomplete-extensions.

You'll note that Scott's blog post, and my github depot both have different approaches to rendering html for suggestion items, so they may either solve your need or serve as an example in how you can reimplement your "item.html" modification.

From what I saw, your modifications are pretty clean so I don't think you'd have any problem coming up with a way to reimplement using extensions!

Hope this helps! Good Luck...

- Chris

lex1982

Re: Several Improvements and Changes to JQueryUI Autocomplete

12 years ago

Hi Chris,

thank you very much for your very helpful reply. I will have a look at the new version soon and see if extensions can help me adding some features while staying up to date with bugfixes and additional features. Sounds very reasonable at least. I added type ahead functionality to our control, looks like a good practice for making a plugin.

Thanks again for your help
Alex

Top Reply

Response title

Attachments

jQuery Forum

Several Improvements and Changes to JQueryUI Autocomplete

Replies(2)

Re: Several Improvements and Changes to JQueryUI Autocomplete

Re: Several Improvements and Changes to JQueryUI Autocomplete

Statistics

Tags

Actions