A searchable catalog like Dynamic lists but without 1000 item limit?

Question

Hi,

there is a need for autocomplete functionality from catalog data similar to Dynamic Lists. Only the catalog data amount is above 11 000 items and will grow bigger in future, which is too much for Dynamic lists to handle.

The Dynamic Lists work on kind of static data - the list items are preloaded before and only then user starts to search/filter the values he is interested in, which eats up browser memory on bigger lists.

Is it possible (and how?) to add data to Dynamic list more dynamically - only after user had entered at least 3 characters. This is more like jQuery UI Autocomplete functionality with ajax datasource (https://jqueryui.com/autocomplete/)?

There is way to create simple string field and hack in the jQuery UI autocomplete itself, but will be ugly and hard coded approach and not compatible with Enaio model structure. I do not want to do so, but that is my backup plan.

Maybe there is "Enaio approved" approach for such needs?

Customer has 3.36 Enaio Red version.

Answer 1

Here comes a first quick answer not waiting for refinement with the team:
A workaround could be: group the entries und use another field to set a group value. Then the list of corresponding items will be reduced.

Comments

In this case it is quite difficult to group the entries. This is a Vendor register. Not much information there - just a name and registry code.

Answer 2

I came up with solution which delivers small amount of data (100 entries) to dynamic list. It happens dynamically as user starts to type in some letters in field. This works well for dynamic list's result view, but it is not good for autocomplete part, where it uses some cached data from past and is not true anymore on such dynamic data updates. So I made a delayed feed of the data, just a second later after the autocomplete is triggered on user 'keyup' event. So far it works smoothly and doesn't crash the browser.
The complete idea:
1) On page load do the ajax request to get full data list - 13000 records in our case.
2) Save this list in JavaScript variable (do not give it to dynamic list or it will crash the browser because of data amount)

    $.getJSON('/rest-ws/service/result/raw?esql=select+strvendorref+from+dms%3Avendor+where+catcompany+%3D+%27' + company + '%27+order+by+strvendorref')
.done(function(data){
  function remapData (v){
    return { value: v.strvendorref };
  }

  vendorsData = $.makeArray($.map(data, remapData));
});

3) with jQuery attach following 'keyup/keydown' event triggers for dynamic list's input field in html DOM.

keydown - clears all previous the dynamic list entries.

    $('[placeholder="Vendor"].eo-autocomplete-input').keydown(function(e){if (!~$.inArray(e.keyCode,skipKeys)) {        vendorlist.setList({ config: { allelementsselectable: true }, entries: [] });     }    });

keyup - after 1 sec delay filters first 100 matched entries from JavaScript data variable and attaches to dynamic list

$('[placeholder="Vendor"].eo-autocomplete-input').keyup(function(e){  if (!~$.inArray(e.keyCode,skipKeys)) {    let val = $(this).val().toLowerCase();
let items = _.filter(vendorsData, item => item.value.toLowerCase().includes(val)).slice(0,100);    clearTimeout(timeOutRef);    timeOutRef = setTimeout(function toPreventAutocomplete(){      vendorlist.setList({ config: { allelementsselectable: true }, entries: items });    },1000);  }});

4) after user had entered few characters in field, he/she can open dynamic list results view where only filtered results are loaded and select the required one.