Tag Archives: HTML

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,


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

jqGrid and Flat JSON Data with Paging

A coworker was tasked with finding a good client-side grid for displaying and editing data from WCF services. We’ve had a little experience with WCF services and JSON serialization of simple data to generate some custom HTML but until now we hadn’t touched grids. Typically we’d use a 3rd party ASP.NET control inside a web application but lately we’ve been trying to be a little more lean.

I haven’t done any research into grids myself so I’m taking it on faith that jqGrid is alright for us. Right out of the gate there was some trouble getting the JSON data to be in a format the grid appreciated. Since we didn’t fancy the idea of boxing all our services into returning data in this format we had to get the grid to work with our format.

I went from knowing nothing about this grid to having 20 tabs open on various sites trying to find any information I could regarding options for making the grid work with our data. It is shocking how much information is out there but I didn’t find a single source that put it all together. It was through pure persistence I found a reference to jsonReader and then found the properties it expects.

Continue reading