OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How optimizing Selectize Performance by Centralizing Options Lists?

  • Thread starter Thread starter Luiz
  • Start date Start date
L

Luiz

Guest
I'm using the Selectize library and facing a challenge. The page I'm building repeatedly creates the same "select" element with a large list of options, which affects performance. These elements are added dynamically when the page loads.

I want to know if it's possible to link the options list of the duplicated inputs to a "central list" to avoid rendering multiple "selectize-dropdown-content" with the same content. I've researched extensively but couldn't find an easy solution. If necessary, I can create a plugin, although I'm not familiar with the library.

Example:

Code:
const Options = [
  { value: 'option1', text: 'Opção 1' },
  { value: 'option2', text: 'Opção 2' },
];

$('#select1').selectize({
  options: Options,
});

$('#select2').selectize({
  options: Options,
});

Result:

enter image description here

These are the same options, no need to load them repeatedly. Ideally, the only resource to maintain would be the uniqueness of each select, such as input, cache...

<p>I'm using the Selectize library and facing a challenge. The page I'm building repeatedly creates the same "select" element with a large list of options, which affects performance. These elements are added dynamically when the page loads.</p>
<p>I want to know if it's possible to link the options list of the duplicated inputs to a "central list" to avoid rendering multiple "selectize-dropdown-content" with the same content. I've researched extensively but couldn't find an easy solution. If necessary, I can create a plugin, although I'm not familiar with the library.</p>
<p>Example:</p>
<pre class="lang-js prettyprint-override"><code>const Options = [
{ value: 'option1', text: 'Opção 1' },
{ value: 'option2', text: 'Opção 2' },
];

$('#select1').selectize({
options: Options,
});

$('#select2').selectize({
options: Options,
});
</code></pre>
<p>Result:</p>
<p><a href="https://i.sstatic.net/WKakSpwX.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/WKakSpwX.png" alt="enter image description here" /></a></p>
<p>These are the same options, no need to load them repeatedly. Ideally, the only resource to maintain would be the uniqueness of each select, such as input, cache...</p>
 

Latest posts

Top