aConic Admin Documentation - v1.0

Version - 1.0.0 Help

Advanced Select

The jQuery replacement for select boxes.
Tom-select.js documentation

How to use

Copy-paste the stylesheet <link> into your <head> to load the CSS.

                            
    <link rel="stylesheet" href="./node_modules/tom-select/dist/css/tom-select.bootstrap5.css"> 
                        

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

                            
    <script src="./node_modules/tom-select/dist/js/tom-select.complete.min.js"> 
                        

Copy-paste the following <script> near the end of your pages under JS Front to enable it.

                            
    <script>
        // INITIALIZATION OF SELECT 
        new TomSelect(".js-select");
    </script> 
                        

Basic example

                                            
    <div class="tom-select-custom">
        <select class="js-select form-select" autocomplete="off"
              data-hs-tom-select-options='{
                "placeholder": "Select a person...",
                "hideSearch": true
              }'>
          <option value="">Select a person...</option>
          <option value="4">Thomas Edison</option>
          <option value="1">Nikola</option>
          <option value="3">Nikola Tesla</option>
          <option value="5">Arnold Schwarzenegger</option>
        </select>
    </div> 
                                        

Dropdown width

Invite
                                            
    <div class="input-group">
        <input type="text" class="form-control" name="fullName" 
            placeholder="Search name or emails" aria-label="Search name or emails" 
            aria-describedby="fullName">
      
        <!-- Select -->
        <div class="tom-select-custom">
          <select class="js-select form-select" autocomplete="off"
                  data-hs-tom-select-options='{
                          "dropdownWidth": "300px",
                          "dropdownLeft": true
                        }'>
            <option value="4" selected>Thomas Edison</option>
            <option value="1">Nikola</option>
            <option value="3">Nikola Tesla</option>
            <option value="5">Arnold Schwarzenegger</option>
          </select>
        </div>
        <!-- End Select -->
      
        <a class="btn btn-primary" href="javascript:;">Invite</a>
      </div> 
                                        

Multiple

                                            
    <div class="tom-select-custom tom-select-custom-with-tags">
        <select class="js-select form-select" autocomplete="off" multiple
                data-hs-tom-select-options='{
                  "placeholder": "Select a person..."
                }'>
          <option value="">Select a person...</option>
          <option value="4">Thomas Edison</option>
          <option value="1">Nikola</option>
          <option value="3">Nikola Tesla</option>
          <option value="5">Arnold Schwarzenegger</option>
        </select>
    </div> 
                                        

Multiple selection

                                            
    <div class="tom-select-custom">
        <select class="js-select form-select" autocomplete="off" multiple
                data-hs-tom-select-options='{
                  "singleMultiple": true,
                  "hideSelected": false,
                  "placeholder": "Select user"
                }'>
           <option value="">Select a person...</option>
           <option value="4" selected>Thomas Edison</option>
           <option value="1" selected>Nikola</option>
           <option value="3">Nikola Tesla</option>
           <option value="5">Arnold Schwarzenegger</option>
        </select>
    </div> 
                                        

Optgroup

                                            
    <div class="tom-select-custom">
        <select class="js-select form-select" autocomplete="off"
                data-hs-tom-select-options='{
                  "placeholder": "Select a person..."
                }'>
          <option value="">Select gear...</option>
          <optgroup label="Climbing">
            <option value="pitons">Pitons</option>
            <option value="cams">Cams</option>
            <option value="nuts">Nuts</option>
            <option value="bolts">Bolts</option>
            <option value="stoppers">Stoppers</option>
            <option value="sling">Sling</option>
          </optgroup>
          <optgroup label="Skiing">
            <option value="skis">Skis</option>
            <option value="skins">Skins</option>
            <option value="poles">Poles</option>
          </optgroup>
        </select>
    </div>