Saturday, November 29, 2008

SexyCombo jQuery plugin

Almost every of us had to fill in web forms, in which you need to enter your city or country. Usually it is implemented using selectboxes. But the users will not tell you that it's usable. In fact, the user has to look at the long list for the value that is already known. In most cases it would be faster to enter this value in the text box. But this is unacceptable from the viewpoint of developers, because in this case we have a limited number of options, and it would be unwise to allow users to enter the word "Russia" along with "Russian Federation". I don't mention typos here. So, there is a conflict between the interests of users and developers which needs to be resolved. Apparently, we should somehow mix the advantages of selectboxes and textboxes. Users who want to choose the value using selectbox will continue to do so. We also do not want to infringe on users who prefer to type, but we must make sure that the value user enters is included in some set of possible values.

I don't want to cheat tou - the widget which I now "dreamed" about already exists. It is called combobox. I faced it for the first time using ExtJS library. This is a very rich AJAX library, with a lot of wonderful and rich visual components. But the richness in this case is not always an advantage, since all the components of the library are linked to each other (the developers tried to make it object-oriented, and have used inheritance actively). If you need just a few components of the library, you will still need to use a large part of it. This library is not lightweight, so I won't advise to use ExtJS in applications designed for mass use. But in general this is an excellent library, and its developers, in my opinion, are worth of admiration. They did their job well.

Another JavaScript library which I admire is, of course, jQuery. If the first library has attracted me by its wealth, then I like the second for its simplicity and elegance. One day I will cover this topic in greater depth, and now I will note that this library has a very convenient system of plugins, which allows third-party developers to expand the functionality of the library. I decided to take it up, so I wrote jQuery plugin wich I called SexyCombo.

Just to make a reservation - plugins with similar functionality already exist. For example, this. But I didn't like it because it uses other jQuery plugins as a basis, but, in my opinion, plugin should be a separate unit, without any dependencies. Moreover, I didn't really like its appearance. Of course, we can change stylesheets, and everything will look like we want, but it is still additional work for plugin users. I think the appearance of this type of visual component should be as neutral as possible and suitable for the most sites without need to change it. Not everyone will be pleased to modify the stylesheets, because it is the most important and difficult part of work, as I learned later.

SexyCombo provides roughly the same level of functionality that other implementations of comboboxes. It allows the user to choose values from the drop-down list or to type it in the text box. Keyboard navigation (using arrow keys) on the drop-down list is also implemented.

SexyCombo uses selectboxes as a source of data. This means that you can start using plugin without any changes in the layout. An important feature: when the user changes the value of the combobox, the value of the corresponding selectbox also changes (if possible) automatically, and the change event is triggered. Thus, if you have JavaScript code that uses selectbox somehow, you can leave it unchanged, and everything will work well. For example, you have selectbox, in which the user must choose a color. You have placed <div> element next to the selectbox, which changes its color when changing value of the selectbox. Now, when you use SexyCombo, you can leave the code unchanged, and functionality of your application will not be affected.

Usage

To start using SexyCombo, you should at a minimum:

  1. Download the latest version of the plugin and unpack the archive.
  2. Include jQuery file to your web page. jQuery file comes with the package.
  3. Include plugin file (js/jquery.sexy-combo-min.js) to your web page.
  4. Include plugin stylesheets to your web page (css/sexy-combo.css).
  5. Write $('select').sexyCombo() in your JavaScript file. This code will turn all selectboxes on your page into comboboxes. Of course, you can use other jQuery selectors, for example, $('#future-combo').sexyCombo().

In addition, jQuery.sexyCombo() method takes only one argument in the form of JavaScript object literal that allows you to configure plugin. For example, you can write $( 'select').sexyCombo({listMaxHeight: 250, triggerSelected: true });. This object may have the following properties:

  • (string) blankImageSrc - the URL of an "empty" images wiich is shown in the place of combobox's icon. You will not probably have to change this. Default is "http://phone.witamean.net/combo-images/s.gif".
  • (string) css - CSS class that will be applied to the elements. Use the default plugin's stylesheet as an example of how to write custom one. Note that CSS is a large part of work, and you should REALLY know what you are doing if you are going to change stylesheet. Default is "combo".
  • (string) selectboxDefaultValue - the value that will be set to the selectbox if none of its options are selected. Default is empty string.
  • (boolean) ignoreSelectboxDefaultValue - if true, the default option of selectbox (see previous config option) won't be included to the combobox's options. Default is true.
  • (integer) width - combobox's width
  • (string) emptyText - the default value of the combobx. Default is empty string.
  • (boolean) autoComplete - if true, combo's value will be autofilled with the first item of the dropdown list (when list is shown). Default is false.
  • (boolean) triggerSelected - if true, the selected option of selectbox will be the initial value fo the combo. Default is false.
  • (string) name - combo's name. Default is selectbox's name + "__sexyCombo".

Supported browsers

Currently SexyCombo supports Firefox 2 only. Serious rendering errors found in Opera and Internet Explporer 6. I will work hard in this direction, and I hope that plugin will support a larger number of modern browsers in the near future.

Support Project

SexyCombo is an open source project, and I will be glad to any form of cooperation. Help to improve plugin , tell your friends about it, write an article about it or help to others to install and configure it. Your help is invaluable.

If you have any questions or suggestions, please write me at Kadalashvili dot Vladimir dot gmail dot com.

Resources

We offer VCP-410 dumps for web designers and newbies on jQuery. Our 350-001 dumps and tutorial contain complete knowledge of jQuery. Learn how to apply jQuery applications with our 640-802 dumps.

I just want to test my robots.txt plugin. To speed up testing, I place a link to test post here, with an appropriate anchor text - sfhsfs fodms fkspcxm

Okay, it seems that I should test robots plugin one more time. It seems that Google works OK with it, but Yahoo has some problems. I've created a blog called Bots test site, and I hope it will be indexed by Google, Yahoo and Bing really soon. I know that Yahoo is usually slow in indexing, but I hope I'll be lucky this time. I've also written a quick topic about this experiment. Also, here is really cool piece of content. You can read super secret blog.

4 comments:

Sam said...

You really need to get support for FF3 and put up a demo somewhere. But great idea.

Aamir Afridi said...

What about http://source.polaris-digital.com/fdd2div/

equinoxe said...

It is nice, but the problem is that it doesn't work in anything but firefox. Could you place something like

if (!$.browser.mozilla) { return; }

somewhere near the beginning so it degrades in other browsers. I don't know if that's enough, but at least worked in Opera as a normal select.

triestino said...

Hi,
I made some modifications and now in my site this niceplugin supports:

IE 8.0

FF 3.0

also to note:
Imade a patch to avoid list display from bottom to top
I dont use the compare feature as for a very specific reason we need value nottext shown in the input field.
Contact me so I can upload or send the code to you ...
Regards
\Giorgio
giorgio_borgia@yahoo.com