title: dijit.form.ComboBox with complex drop-down menu
body: <p>I'd like to create a more interesting blog autocomplete widget; one that will return a drop-down menu that will contain: (a) title, (b) keywords, (d) date. E.g.:</p>
  
  <pre><code>|======================
  | inte|
  |======================
  | Interesting Title
  | Tags: title, bar
  | Date: Jun, 12 2010
  |----------------------
  | Interner Guide 
  | Tags: guide
  | Date: Aug, 12 2010
  |----------------------
  |          ...
  |======================
  </code></pre>
  
  <p><strong>I. First Option</strong></p>
  
  <p>One way of achieving this is by overriding the _createOption of the _ComboBoxMenu like this:</p>
  
  <pre><code>dojo.declare("SearchBox", dijit.form.ComboBox, {
      postMixInProperties: function() {
          this._popupWidget = new SearchBoxMenu();
          this.inherited(arguments);
      }
  });
  
  dojo.declare("SearchBoxMenu", dijit.form._ComboBoxMenu, {
      _createOption: function(item, labelFunc) {
          var menuitem = dojo.doc.createElement("li");
          menuitem.innerHTML = [
              "&lt;ul&gt;",
                  "&lt;li&gt;", store.getValue(item, "title"), "&lt;/li&gt;",
                  "&lt;li&gt;Tags: ", store.getValue(item, "tags"), "&lt;/li&gt;",
                  "&lt;li&gt;Date: ", store.getValue(item, "date"), "&lt;/li&gt;"
              "&lt;/ul&gt;"
          ].join("")
          return menuitem;
      }
  });
  </code></pre>
  
  <p>But I'm (a) overriding a private class, then (b) it's private method, so if the method signature changes for these classes in dojo 1.6 -- I'll be in trouble. This makes this way a bit undesirable. </p>
  
  <p><strong>II. Second Option</strong></p>
  
  <p>The second way will not break if the private API signature changes, but does mix data with presentation:</p>
  
  <pre><code>var myStore = new dojo.data.ItemFileReadStore({
      data: {
          identifier: "title",
          items:  [
              {title: "Interesting Title",
               tags: "title, bar",
               date: "Jun, 12 2010",
               label: "&lt;ul&gt;&lt;li&gt;Interesting Title&lt;/li&gt;"
                   + "&lt;li&gt;Tags: title, bar&lt;/li&gt;"
                   + "&lt;li&gt;Date: Jun, 12 2010&lt;/li&gt;&lt;/ul&gt;"}
          ]
      }
  });
  
  var box = new dijit.form.ComboBox({
      store: myStore,
      searchAttr: "title",
      labelAttr: "label",
      labelType: "html"
  }, "ipt1"),
  </code></pre>
  
  <p>The labelAttr tells the ComboBox to look at the dataStore's items[].label and use that in the drop-down menu. The "labelType" tells the _ComboBoxMenu to include it as HTML instead of as a simple string. As I've mentioned above, one disadvantage of this method is that it mixes data with presentation.</p>
  
  <p><strong>Question: Thus, I have two options, but neither is perfect. Is there a better way? If not -- which one do you recommend?</strong></p>