Dojo Combobox Performance

[ZorbaConlen]

Hi,
Looking for suggestions to make a combobox perform better. The problem is that I have a large dataset (appx 75k values) which I'm populating into the combobox. This is done via a query of a sql table. Then the query results are processed by adding them to an array which is used as the data store (itemFileReadStore).

The main problem is that it is quite slow when user starts typing a value or tries to pick a value from the dropdown list. Like several seconds delay. Not too surprising, given the size of the data store...

So, are there ways to improve performance with the itemFileReadStore? Is there a better data store to use? JsonRest? I do have the pagesize attribute of the combobox set to 20, which helps a bit....

The app is at jsapi 2.8.

Here is code which programatically creates combobox

function createAssetSearch() {
  //create label for search input
  var assetSearchLabel = dojo.create("div", {innerHTML:"Asset Search", style: { display: "inline", padding: "5px", position: "relative", top: "3px"}});
  var assetSelect = new dijit.form.ComboBox({
    name: 'assetSelect',
    pageSize: 20,
    maxHeight: 300,
    id: 'assetFilterSelect',
    fetchProperties: { sort: [{attribute:"name",descending: false}] },
    onMouseEnter: function() {clearDefaultValue(this.value);},
    onChange: function() {zoomSetup(this.value);}, //needs to be a reference to a function, not a direct function call
    value: 'ex. 198802' 
  }, dojo.doc.createElement('div'));
 
  dojo.byId('webmap-toolbar-center').appendChild(assetSearchLabel);
  dojo.byId('webmap-toolbar-center').appendChild(assetSelect.domNode); //need to pad item so it is not right next to
  //execute funtion which populates asset dropdown dijit
  queryAssets();
}

and the function to populate it

function populateAssetList(results) {
  //Populate the dropdown list box with unique values
  var asset, values = [];
  var features = results.features;
  dojo.forEach (features, function(feature) {
    asset = feature.attributes.ASSETNUMBER;
    layer = feature.attributes.LAYER
    values.push({name:asset,layer:layer});
  });
        
  var dataItems = {
    identifier: 'name',
    label: 'name',
    items: values
  };
  store = new dojo.data.ItemFileReadStore({data:dataItems});  
  dijit.byId("assetFilterSelect").store = store; 
}

[ReneRubalcava]

Maybe you could try dojox/data/QueryReadStore to try and limit the results you get back.
https://dojotoolkit.org/reference-guide/1.9/dojox/data/QueryReadStore.html

Here are some snippets from a project I have where I use it.

// Define my custom QueryReadStore behavior
var ParcelStore = declare([QueryReadStore], {
  fetch: function(request) {
 request.serverQuery = {
   q: request.query.name // This is the querystring that will be used, ie - url/search?q=searchstring
 };
 return this.inherited("fetch", arguments);
  },
  requestMethod: 'get'
});

// create a new instance of my QueryReadStore
var p_store = new ParcelStore({
            url: url // this is a url I passed in to a function, the base URL to do my queries
          });
// Create my new ComboBox with appropriate parameters
parcelSearch = new ComboBox({
 id: 'parcel-filterselect',
 name: 'parcel',
 hasDownArrow: false, // so it doesn't look like a combobox, just an input
 placeHolder: 'Parcel Number...',
 store: p_store, // the custom QueryReadStore I created above
 autoComplete: true,
 style: 'width: 131px;',
 tooltip: 'Enter a parcel number',
 searchAttr: 'name',
 pageSize: 10 // so it doesn't blow up you vertical scroll
}, 'parcel-filterselect');

This has worked pretty good for me in the past.

[JeffJacobson]

Depending on what browsers you need to support, you may be able to use an HTML datalist element with an input element to provide an auto-completing input text box.

If you need a drop down list, you can try using a regular HTML select tag and use JavaScript to add option elements.

[ZorbaConlen]

Thanks for the idea Jacob. I'll look into it.