Monthly Archives: February 2013

HTML User Picker now on GitHub!

It’s taking a bit longer to get out Part 2 of creating a user picker in HTML, CSS and jQuery than I’d initially expected. In the interim the User Picker has evolved into a more generic picker useful for other types of data. As such it’s undergone some heavy modification to strip out specific references to users / employees and gained some additional configuration options.

I had almost the entire Part 2 post written and ready the night I published Part 1. I only needed to do a bit of cleanup of the user picker to remove any traces of specific information and get it ready for people to view publicly. With all the changes that have happened since, the post is basically obsolete. It wouldn’t be kind to force people to wait for it to be rewritten before letting you see the current code and begin using it. I’ll try to get the blog post out soon for those interested in the process of creating a jQuery plugin but I have a feeling the source is much more highly desired!

The picker – now called entitypicker – can be found on GitHub. There is also a hastily thrown-together demo page. The demo uses Yahoo services to do YQL queries for city names.

This is my first jQuery plugin and most complex bit of HTML, CSS and JavaScript I’ve ever attempted to write. Please keep that in mind when you’re reviewing it. I look forward to feedback and hopefully some contributions to help make it more useful and solid.

Be kind,
-Erik

Advertisements

HTML User Picker using jQuery + UI (part 1)

UPDATE: I created a project on GitHub. See the follow-up post.

I was recently tasked with solving a rather unusual problem at my company. It was unusual not in the uniqueness of the request but by how common it would seem to be yet we had no existing solution. While we have created standalone web applications to satisfy internal needs, it appears we never really had cause to build a proper user picker. Most of our solutions that needed one happened to be surfaced through SharePoint and made use of its user search and selection methods. That’s why I was surprised to have 3 applications which needed a picker for internal employees pop up at almost the exact same time.

Of course our first thought was to leverage an autocomplete control. Quite some time ago I’d made use of the jQuery plugin from bassistance.de before one was available as part of jQuery UI. Though the autocomplete was quite nice, the free-form nature of the text was not strict enough for our purposes in picking users.

A few suggestions were tossed around including turning an HTML div into a pseudo-input by listening to keypress events and updating the values. A coworker was tasked with turning out a prototype based on this design and he did a pretty good job. It was functional but it lacked some features people have come to expect from an autocomplete-style control like the ability to use arrow keys to navigate the selections. In addition, the input was a bit buggy and there were some race conditions with rendering suggestions from a remote service while a user was still typing. In order to solve the buggy input, the keypress listeners were replaced by a hidden input control nested inside the div and styled in such a way as to be invisible. We still had to address the usability and race condition.

At this point we had a good idea of what we wanted the control to look like – modeled after GMail’s address picking – and what it needed to do. I ended up gutting the prototype and rewriting it. While it is still an early version and could use some enhancement to make it more flexible, we achieved a solution that is working quite well for us.

Continue reading