Extensible Autocomplete

Posted on by

The release of the Autocomplete widget in jQuery UI 1.8 was a pretty important milestone for the jQuery UI team. If you’ve looked at the widget, you may have noticed that there are only four options, far fewer than our other plugins. Unlike progressbar, our plugin with the fewest options, Autocomplete’s small API isn’t a direct result of the plugin’s simplicity. In fact, Autocomplete is quite complex.

When designing the Autocomplete widget, we started with Jörn Zaefferer’s Autocomplete plugin, which has 21 options, as a model. Admittedly, Jörn’s plugin does more for you out of the box than ours, but our smaller API is just as flexible and has the bonus of being easier to learn and use. A lot of thought, discussion, and prototyping went into narrowing down the list of 21 options to 4.

Out of the box, Autocomplete provides support for local data sources and remote (JSON) data sources by simply providing an array or url to the source option. Support for JSONP, XML, and caching can all be layered on top in just a few lines of code.

There’s also a set of extensions hosted by me that provide additional options for the Autocomplete widget. The html option (demo) allows you to specify whether your labels should be interpreted as HTML or text. There’s also the selectFirst option (demo) which automatically activates the first item when the menu is shown, reducing the number of keystrokes necessary to select an option. The autoSelect option (demo) allows a user to type out a valid option and tab away from the field without having to select the item from the menu. If the value entered by the user is valid, the select event will be triggered just as if the user had explicitly chosen the item from the menu. I also have an accent folding extension (demo) that makes it easier for users to select values with accented characters. For example, if there is an item with the text “Jörn”, the user would normally have to type the umlaut in order to see the item. However, if the accent folding extension is loaded, the user can type “Jorn” and they will still see the result.

Going a step further, you can use custom data formats and define custom displays. For example, you can categorize the results or display additional information such as item descriptions and images. There’s even an example of expandable search results (Note: this is just a prototype based on a demo from Roman Chyla, it is not full-featured. See the forum thread for more details). You can even support multiple words from a single text field.

Finally, there’s the combobox demo that brings Autocomplete functionality to select elements. The combobox hides the select element and instead displays a text field for the user to type in. The possible values are determined by parsing the options from the select, and the user can view all options by clicking a button next to the text field. For a detailed explanation of how the combobox works, check out Jörn’s article on Learning jQuery.

jQuery UI 1.9 Milestone 1 – Tooltip

Posted on by

The first milestone release for jQuery UI 1.9 is out, featuring the new Tooltip widget, in active development.

What’s a Milestone Release?

A milestone release makes it easier to try out the latest development code of jQuery UI without necessarily having to check out code from GitHub.

With a milestone release you can try out new widgets that are pretty far along (though not yet final) and provide feedback based on released code with a specific version number.

Note: the API is subject to change as the code is still under active development.

Tooltip

We’d love your feedback on our new Tooltip widget, to help ready it for the 1.9 final release. The API is already in good shape, so if you start using it now, migrating to 1.9 final should be really easy.

From the Tooltip documentation:

Tooltip replaces native tooltips, making them themable as well as allowing various customizations:

  • display other content than just the title, like inline footnotes or extra content retrieved via Ajax
  • customize the positioning, eg. to center the tooltip above elements
  • add extra classes to customize the appearance, for warning or error fields

A fade animation is used to show and hide the tooltip, making the appearance a bit more organic, compared to just toggling the visibility.

All you need is an element with a title attribute. Grab that element and call .tooltip() on it:

<a title="Details for this link" href="#">Link</a>
<script>
  $("a").tooltip();
</script>

When the mouse hovers over the element, the tooltip will appear, like so:

Demo: Forms with tooltips

Demos

Play with the latest demos in the tooltip branch on our live code view site, view.jqueryui.com:

Download

You can download the jQuery UI 1.9 Milestone 1 – Tooltip release as a zip file or via git:

File Downloads

Git

How to Provide Feedback

wiki page

To help with the design and development of the Tooltip widget, visit the Tooltip page on our Development & Planning wiki.

forum

If the comments section on the wiki page doesn’t provide enough room for your feedback, post to the Developing jQuery UI Forum and tag the post:

How to Contribute Code

If you have code changes for the Tooltip, fork jQuery UI on GitHub, commit to the tooltip branch, and submit a pull request.

If you’re new to git or GitHub, see our guide: How to submit a fix to jQuery UI – The Easy Way.

Comments

Note: please do NOT use the comments section of this blog post for feedback on the Tooltip widget. This discussion should occur on the wiki page and the forum (see How to Provide Feedback, above).

If you have feedback on us doing our first milestone release, feel free to leave a comment below. Thank you.

How to submit a fix to jQuery UI – The Easy Way

Posted on by

Now that jQuery UI is hosted on GitHub, it’s even easier to start contributing fixes to the project.

Let’s walk through the easy way, where you don’t need to learn how to really use git. In another post, we’ll cover some best practices for contributing with git.

Let’s say you want to submit a patch to the Dialog file, jquery.ui.dialog.js.

Step 1: Sign up for GitHub (jump on it)

Step 2: Fork the jQuery UI repository (become a committer of your very own copy of jQuery UI)

Step 3: Modify your fork through the GitHub web interface (commit your change without knowing git)

  • http://github.com/{your-username}/jquery-ui
  • Click on the folder and file you want to modify
    • click “ui/”
    • click “jquery.ui.dialog.js”
  • When you’re viewing the contents of the file you want to change, click the “edit” link (top right)
  • Make changes to the file in the editor
  • Enter a Commit Message to summarize the changes you’ve made and why you’ve made them.
    • This should include a reference to a Trac ticket, formatted like so
    • “Dialog: modified the foo to no longer bar. Fixed #1234 – dialog: IE6 crashed when foo is set to bar”
    • Be sure your commit message includes 4 parts: the WHERE, the WHAT, the WHY #Num, and the WHY Name. See the jQuery UI Commit Message Style Guide for more detail.
  • Click “Commit”

Step 4: Submit a Pull Request (tell the jQuery UI team why your change rocks)

  • http://github.com/{your-username}/jquery-ui/blob/{id-of-commit}/ui/jquery.ui.dialog.js
  • Click “Pull Request”
  • Enter a Message that will go with your commit to be reviewed by core committers
  • Click “Send Pull Request”

Step 5: Add a link to your commit to the ticket in Trac (tell everyone you’re on the case)

Step 6: Eat a cookie (yum)

  • You’re done!

Now if you need to change multiple files as part of one commit, the web interface will not be the way to go. In that case you’ll want to learn a little more about GitHub and git. You can start here:

jQuery UI Download Builder/ThemeRoller Status

Posted on by

NOTICE: The Download Builder and ThemeRoller have been restored to working order again.  Thank you all for your patience.

We are aware of the problems with the Download Builder and ThemeRoller and we apologize for any inconvenience this has caused.  We have disabled those components on our web site until the problems with these components can be resolved.  In the meantime, we would like to offer these static links for jQuery UI and jQuery UI Themes.  The Development bundle includes code for all jQuery UI plugins and the base theme.  The Themes Package includes all 21 pre-built themes from the ThemeRoller gallery.

jQuery UI 1.8rc1 (Preview)

jQuery UI 1.7.2 (Stable)

jQuery UI 1.6 (Legacy)

Google CDN

Multiple stable versions of jQuery UI are hosted on Google’s CDN as well as all the ThemeRoller themes for 1.7.2: base, black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, vader.

With Download Builder and ThemeRoller out of commission you will not be able to create custom downloads or themes. We understand that this is inconvenient and we are working as hard as we can to solve the problems as soon as possible. Thank you for your patience!

jQuery UI Worldwide Sprint: Now scheduled for April 17 & 18

Posted on by

The jQuery UI Team is pleased to announce its second Worldwide sprint, to take place this Friday April 17th and Saturday 18th, 2009. Two full days of testing, fixes, documentation, and general getting-stuff-done. Our goal is ready the 1.7.2 release, so we can start focusing on 1.8 and beyond, and we invite any and all to help. Whether you have an hour, or an afternoon, come and run really fast with us.

How Will It Work?

We’ll all gather in IRC (#jqueryui-sprint on freenode) throughout the two-day sprint, with a couple of scheduled meetings to keep everyone on the same page, and make sure things keep moving. Other than that we’ll just be doing as much as we can, as fast as we can. Opening tickets, closing tickets, breaking stuff, fixing other things, and everyone’s favorite pastime: documentation (and demos). Take a look at last year’s sprint page to see what we accomplished.

I’m New Here. Can I Help?

Absolutely. If you’ve thought about contributing to jQuery or jQuery UI before, but never really found the right moment or momentum, this sprint is the perfect time to get involved. A number of members of the jQuery UI Team will be around to help people get started, especially if it’s your first time. We’ll help you help us, in whatever way you want. That could be testing, documentation, ticket triage, bug fixes, writing demos, contributing to the planning wiki or even just playing with new stuff as we churn it out, and providing valuable feedback.

More Details

We’ve created a wiki page to help coordinate this big event. It has some more details on what is planned, how to jump in, and will be updated throughout the sprint to show status and next steps.

Tell us you’re coming!

We invite you to add your name to the wiki page as a participant, if you’re interested, even if you have only a few hours (or aren’t sure how much time you’ll have). Also, feel free to specify what you’re willing and/or able to do. Thanks!