How to use Magento2 Module Select2 Ui Component ? How active module in default.xml?

Question

I succesfull installed Magento2 Module Select2 Ui Component from https://github.com/weprovide/magento2-module-select2-uicomponent

I never had to use UI components. I want to active Select2 on frontend on my category page. Does anyone can help me with that ? Can I just add this Component by refercence to default.xml or default_head_blocks.xml in Magento_Theme/layout ?

    <select class="admin__control-select" data-bind="
    attr: {
        name: inputName,
        id: uid,
        disabled: disabled,
        'aria-describedby': noticeId
    },
    hasFocus: focused,
    optgroup: options,
    value: value,
    optionsCaption: caption,
    optionsValue: 'value',
    optionsText: 'label',
    select2: {}
" />

Thanks in advance!

Answer 1

You need to include select2.js on front-end using define or RequiredJs As sample

• JS code

define

define(['jquery', 'Namespace_ModuleName/js/select2path'], function($){
     $('.control-select2').select2({});
});

requirejs on phtml file

require(['jquery', 'Namespace_ModuleName/js/select2path'],function($){
     $('.control-select2').select2({});
});

• HTML code

   <select class="control-select2">
   <option>option1</option>
   </select>
  

let use WeProvide_Select2UiComponent module

• HTML Code

    <select class="control-select2">
        <option>option1</option>
    </select>
  

• Javascript Code

   require(['jquery', 'WeProvide_Select2UiComponent/js/select2','domReady!'],function($){
              $('.control-select2').select2({});
   });