Display Unique Results within dijit.form.ComboBox

By  on  

The Dojo Toolkit does well in allowing easy integration of web services with Dijit widgets via dojo.store.JsonRest.  One such widget is the dijit.form.ComboBox, which uses data stores to displays an autosuggest pane populated with items based on the store's contents.  One problem I've run into is that some services return duplicate labels (i.e. two persons named "David Walsh").  You want both items if you can use both of them but what if you're using ComboBox for search?  You wouldn't want duplicates.  That's where I created a small custom class to prevent duplicates within the ComboBox's dropdown menu.

Custom Dojo Class

dijit.form.ComboBox provides a dropDownClass parameter which allows you to customize which class should handle dropdown duties.  The default class is dijit.form._ComboBoxMenu.  We will extend dijit.form._ComboBoxMenu and for our custom duplicate-preventing class, then change the dropDownClass parameter for any instance of ComboBox where we don't want duplicates.

The method that handles items before placing them into the dropdown is the createOptions method. createOptions cycles through the results and creates the HTML for them.  What we need to do is "intercept" the results before they can be added to the dropdown.  Let's create our custom _UniqueComboBoxMenu class with intercept capabilities:

// Provide the class
dojo.provide("davidwalsh.form._UniqueComboBoxMenu");

// Get dependencies
dojo.require("dijit.form.ComboBox");

// Declare the class
dojo.declare("davidwalsh.form._UniqueComboBoxMenu", dijit.form._ComboBoxMenu, {
	
	createOptions: function(results, dataObject, labelFunc) {
		
		// Cycle through to find uniques
		var uniqueKeys = {}, uniqueItems = [];
		dojo.forEach(results,function(result,index) {
			var label = labelFunc(result);
			if(typeof label != "string") {
				label = label.label;
			}
			if(!uniqueKeys[label]) {
				uniqueKeys[label] = result;
				uniqueItems.push(result);
			}
		});
		
		// Update arguments arr
		arguments[0] = uniqueItems;
		
		// Call inheritance chain for this method, return result
		return this.inherited(arguments);
	}
});

Our custom createOptions method receives the options, dataObject, and labelFunc, a function which generates the item's label text/HTML.  Before any other processing, we cycle through each item, create its label, and store the label in an object so that we know when it's been used.  If the label hasn't been used yet, we add the option to the uniqueItems array.

Once the uniques have been created, we push them into the original arguments array's first position, then call this.inherited(arguments) to call the method's original functionality.  In plain English, all we're doing is stripping duplicates from the results array and carrying on as usual.  This technique is less evasive than directly editing the existing class and, as you can see, our custom class stays small.

Implementing the Class

Implementing the class is simple.  Since ComboBox provides the dropDownClass option, all you need to do is provide our custom class to each instance that should implement it:

var combo = new dijit.form.ComboBox({
	store: myDataStore
	dropDownClass: "davidwalsh.form._UniqueComboBoxMenu"
},"myNode");

The instance above will only return unique suggestions!

This post should highlight one aspect of Dojo that I love -- extreme flexibility and the ability to create tiny classes thanks to the awesome inheritance pattern provided by dojo.declare().  Keep this class handy if you use Dijit forms and web services!

Recent Features

  • By
    Interview with a Pornhub Web Developer

    Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

Incredible Demos

  • By
    How to Create a Twitter Card

    One of my favorite social APIs was the Open Graph API adopted by Facebook.  Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...

  • By
    MooTools History Plugin

    One of the reasons I love AJAX technology so much is because it allows us to avoid unnecessary page loads.  Why download the header, footer, and other static data multiple times if that specific data never changes?  It's a waste of time, processing, and bandwidth.  Unfortunately...

Discussion

  1. rajkamal

    can this be done like this.

    pseudo code:

    createOptions: function(results, dataObject, labelFunc) {
    isResultsItmesUnique(results) ? your_implementation : return labelFunc(result)
    }

    will this be efficient?

  2. Hi David,

    I was happy to find this rare gem of a code snippet that works with a dijit. I rewrote this unique combobox result using AMD, and was surprised how well it just worked. I’ve posted my updated code in a Github Gist at https://gist.github.com/raykendo/6418dbc9750b22e2069c.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!