ComboBox Update

Yeah, I know it's only been a few hours, but after implementing a few different instances, I quickly decided that async processing was basically required for a performant UI. Your callback function no longer has to return an array of items (it still can, of course), but now it will be passed a second argument, which is a reference to the ComboBox object itself. There is a new setItems method on the object, which simply takes an array of items and rerenders the dropdown with them.

This makes using asynchronous JS remoting very easy to use for popuplating the dropdown with a simple closure (leveraging the Neuromancer JS remoting libraries):

function nameCallback(name, cb) {
    pathToFacade + "getNames&name=" + name,
    function(s) {
      var result;
      if (s == "")
        result = new Array();
        result = s.split("|");

I also added a config framework for functional flexibility, and used it to implement multi-item processing. So instead of only being able to enter a single item, you can configure the widget to allow multiple items, and as you enter each one, it will give you completion options for just that single item. I used it for tagging objects in a CMS, where I needed to assign multiple tags to an object, but also be able to create new tags on the fly. So I just type them all in, using completion for the existing tags, and then the backend sorts out what it needs to create before assigning.

The demo, downloads, and project page are still available in their original locations, just they now have updated code.

8 responses to “ComboBox Update”

  1. bob

    You may want to check out this site, since they already did one

  2. Steve Nelson

    Barney talk to Dan Switzer about including this in qforms. This would be a fantastic addition.

  3. Barney


    I didn't see a combobox example on the site anywhere. Do you have the specific URL?

    I did go looking before I wrote it and found a couple other implementations, but all of them operated based on arrays of options and the combo box object itself did the selection.

  4. Julian

    Just got it working with the cfajax library. Took a few hours of trial'n'error (being a complete newbie to this) but well worth it. Nice one Barney, thanks.

  5. Veeru

    Hey Bob,
    Thanks for the widget, works fine for me with PHP, loaded the list dynamically with a record set and it worked. But just wanted to ask you, if i had a set of 10 items, and i press the key "a", i get almost all the items having an "a" irrelevant of the position, i was hoping that i can see only items starting with the letter "a", did i do something wrong bob?

  6. Veeru

    Hye Bob, its' me once again with another question, what is the limitation on the number of items your widget can hold at a time? can it take a number in thousands?


  7. winfred

    He Bob,
    I was wondering if it's true that i can't select an item from the dropdown list with my mouse pointer. Both in IE and mozilla this feuture doesn't work.

    i don't know if it's possible, would you let me know ?


  8. panjas

    hey winfred, For some unknown reason (that I didn't understood yet), it's seems that the mouse click works from time to time (meening not 100% of the test)…

    Anyway, I've not succed yet to retreive the id of the selected item.
    I understood that it is with "nameCallback", but how can I tell the function the combo value?
    function nameCallback(value){}

    many thanks to send me a mail if you found it before me.