Combo box with large local list

[ScottChapmanParticipant]

When dealing with large lists, the recommendation seems to be to bind to a dataAdapter and send a remote query. But I have a large local list (for discussion purposes, 10,000+ 8-character strings). What’s the best way to populate a combobox that then supports searching this?

[Peter StoevKeymaster]

Hi Scott,

The combobox can handle easily 10,000+ items.

Ex:

var items = [];

for(var i = 0; i < 10000; i++) {
    items.push('Item' + i);
}

// Create a jqxComboBox
   $("#jqxComboBox").jqxComboBox({
       source: items,
       theme: 'energyblue',
       width: '200px',
       height: '25px',
       selectedIndex: 0,
       animationType:'fade'
   });

Regards,
Peter

[ScottChapmanParticipant]

My biggest issue is with the performance of setting (and resetting) the source items.

In my real application, it’s taking about 1.5 seconds to populate my test case of almost 14,000 items. The concern is that this is not the worst case scenario, which could be multiple times larger (at least in certain edge cases).

        var t1 = performance.now();
        $("#expEntSelect").jqxComboBox({source: entities});
        var t2 = performance.now();
        console.log("Populating entity select comboBox took "+(t2-t1)+"ms for "+entities.length+" entities ");

Populating entity select comboBox took 1545.5049999291077ms for 13899 entities

Interestingly, it’s hard to replicate in a fiddle. Upon first load of this it seems to take over 1 second (but still less than my test case of 1.5 seconds) but if you just hit run again, it will be down to about 800ms, which probably is on the edge of acceptable.

My hope was that maybe I could bind to a local jqxDataAdapter and somehow progressively render results with that in a more performant manner. But I don’t see a way of doing that.

But I’m also exploring other UI paradigms. Worst case, the user might not get to search and just have to know the entity name that they want to select.

[Peter StoevKeymaster]

Have you seen this example: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxcombobox/cascadingcombobox.htm?material. It is great example for dynamic rendering of comboboxes depending on user preference. In the case, it depends on the selected value of the first combobox. You can also consider using the jqxInput and load its data on demand. Example: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxinput/index.htm – Multiple values demo

Regards,
Peter

[ScottChapmanParticipant]

I’m actually doing something very much like the cascading combo box, which is why the performance of setting the values to select matters–the other selections that the user makes may or may not pre-qualify the list to a “reasonable” number of items. I.E. from the other fields they may make a selection for 20 items or 20,000. And they can change those around meaning that I need to redrive the population of the problematic comboBox after every selection that they make. Ok, if their other selection is 20, not so great if it’s 20,000.

The data adapter doesn’t seem to provide much (any?) value over just populating a new array for the source for the comboBox. I was hoping for a way that I could use the data adapter and remoteAutoComplete such that the dataAdapter would be called and return the list of matches from an array (i.e. without having to use a true remote call back to the server).

The jqxInput idea is fine, except it foregoes the option to have a drop-down arrow to just select the value.

Absent a better idea, my current idea is to use the comboBox, but only populate it with values when the other filtering fields have limited the list down to say less than 5,000. (Need to figure out the reasonable threshold.) If the user hasn’t filtered the choices to less than that threshold, the user will be able to type in the field, but there’s no validation. But we’ll try to use that typed value on the assumption that they do know a valid value. Unfortunately, it doesn’t look like the comboBox API has a method to read the entered (but not yet selected, since it’s not in the list, because there is no list) value. But it seems that I can get it by going after the hidden input field directly:

        var typedValue = $("#expEntSelect input")[1].value;
        var selectedValues = $("#expEntSelect").jqxComboBox("getSelectedItems");

[Author]

Posts