The latest articles on DEV Community by SamBrishes (@sambrishes). https://dev.to/sambrishes https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F192000%2F19e75616-80f0-4265-a866-df3e0177a332.png https://dev.to/sambrishes en SamBrishes Mon, 08 Jul 2019 15:21:08 +0000 https://dev.to/sambrishes/tail-select-the-jquery-less-select-alternative-3mc9 https://dev.to/sambrishes/tail-select-the-jquery-less-select-alternative-3mc9 <blockquote> <p>The original tail.select package is deprecated, check out the new fork @ <a href="http://github.com/wolffe/tail.select.js">github.com/wolffe/tail.select.js</a> or on <a href="http://npmjs.com/package/tail.select.js">npmjs.com/package/tail.select.js</a>.</p> </blockquote> <p>The default HTML <code>&lt;select&gt;</code> fields aren't the beauties in forms, regardless of the used operating system and browser. And even if you can adapt the main select container, using some flavor CSS, you're still getting some trouble with the dropdown box, especially on dark websites, because these aren't really designable (just a few CSS properties in a few browsers are available).</p> <p>But that is just one reason, why many web-designers using a <code>&lt;select&gt;</code> replacement, such as Select2, Chosen, Selectize.js or SumoSelect. Many other developers choose such packages, because the trying to increase the usability and functionality of the respective form fields. A search can be really helpful if you have dozens or hundreds of options, a "Select All" / "Select None" button simplifies the multiple selection of an optgroup (for example), the ability to "unselect" an option on single <code>&lt;select&gt;</code> fields is also extremely useful for some projects.</p> <p>Anyway, at least the named packages above have one and the same disadvantage: <strong>jQuery</strong>. Please don't get me wrong, this DOM library is really useful and helpful to write code fast (after reading the documentation and learning the respective behaviour). BUT, jQuery is also really fat and bulky, even for just small web projects. Since vanilla JavaScript is way easier to write, and there are way more helpful tutorials (such as here on dev.to) it doesn't make any sense to use jQuery anymore.</p> <h2> That's the Spirit of my tail.* projects </h2> <p>My <a href="https://github.com/pytesNET/tail.select"><strong>tail.select</strong></a> project started as jQuery plugin, but since version 0.3.0 it is completely dependency-less. It is my pure vanilla JavaScript package against Select2, Chosen, Selectize.js and SumoSelect and all other jQuery based <code>&lt;select&gt;</code> replacements. It offers almost the same functionality (partly even beyond), offers many themes for light and dark websites and can be used with ease (and also with <a href="https://github.com/pytesNET/tail.select/wiki">a good documentation</a>).</p> <p>It's still in Beta, why I'm still searching for people testing it and giving me feedback and suggestions to make the upcoming Version 1.0.0 as fast, lightweight and great as possible. (Which gets also re-written in TypeScript).</p> <p>The best way to show you the current scope of the environment is the current available options:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="nx">tail</span><span class="p">.</span><span class="nx">select</span><span class="p">(</span><span class="dl">"</span><span class="s2">select</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span> <span class="na">animate</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// [0.3.0] Boolean</span> <span class="na">classNames</span><span class="p">:</span> <span class="kc">null</span><span class="p">,</span> <span class="c1">// [0.2.0] Boolean, String, Array, null</span> <span class="na">csvOutput</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// [0.3.4] Boolean</span> <span class="na">csvSeparator</span><span class="p">:</span> <span class="dl">"</span><span class="s2">,</span><span class="dl">"</span><span class="p">,</span> <span class="c1">// [0.3.4] String</span> <span class="na">descriptions</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// [0.3.0] Boolean</span> <span class="na">deselect</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// [0.3.0] Boolean</span> <span class="na">disabled</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// [0.5.0] Boolean</span> <span class="na">height</span><span class="p">:</span> <span class="mi">350</span><span class="p">,</span> <span class="c1">// [0.2.0] Integer, null</span> <span class="na">hideDisabled</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// [0.3.0] Boolean</span> <span class="na">hideSelected</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// [0.3.0] Boolean</span> <span class="na">items</span><span class="p">:</span> <span class="p">{},</span> <span class="c1">// [0.3.0] Object</span> <span class="na">locale</span><span class="p">:</span> <span class="dl">"</span><span class="s2">en</span><span class="dl">"</span><span class="p">,</span> <span class="c1">// [0.5.0] String</span> <span class="na">linguisticRules</span><span class="p">:</span> <span class="p">{</span> <span class="c1">// [0.5.9] Object</span> <span class="dl">"</span><span class="s2">е</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">ё</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">a</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">ä</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">o</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">ö</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">u</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">ü</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">ss</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">ß</span><span class="dl">"</span> <span class="p">},</span> <span class="na">multiple</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// [0.2.0] Boolean</span> <span class="na">multiLimit</span><span class="p">:</span> <span class="kc">Infinity</span><span class="p">,</span> <span class="c1">// [0.3.0] Integer, Infinity</span> <span class="na">multiPinSelected</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// [0.5.0] Boolean</span> <span class="na">multiContainer</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// [0.3.0] Boolean, String</span> <span class="na">multiShowCount</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// [0.3.0] Boolean</span> <span class="na">multiShowLimit</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// [0.5.0] Boolean</span> <span class="na">multiSelectAll</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// [0.4.0] Boolean</span> <span class="na">multiSelectGroup</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// [0.4.0] Boolean</span> <span class="na">openAbove</span><span class="p">:</span> <span class="kc">null</span><span class="p">,</span> <span class="c1">// [0.3.0] Boolean, null</span> <span class="na">placeholder</span><span class="p">:</span> <span class="kc">null</span><span class="p">,</span> <span class="c1">// [0.2.0] String, null</span> <span class="na">search</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// [0.3.0] Boolean</span> <span class="na">searchConfig</span><span class="p">:</span> <span class="p">[</span> <span class="c1">// [0.5.13] Array</span> <span class="dl">"</span><span class="s2">text</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">value</span><span class="dl">"</span> <span class="p">],</span> <span class="na">searchFocus</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// [0.3.0] Boolean</span> <span class="na">searchMarked</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// [0.3.0] Boolean</span> <span class="na">searchMinLength</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span> <span class="c1">// [0.5.13] Integer</span> <span class="na">searchDisabled</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// [0.5.5] Boolean</span> <span class="na">sortItems</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// [0.3.0] String, Function, false</span> <span class="na">sortGroups</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// [0.3.0] String, Function, false</span> <span class="na">sourceBind</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// [0.5.0] Boolean</span> <span class="na">sourceHide</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// [0.5.0] Boolean</span> <span class="na">startOpen</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// [0.3.0] Boolean</span> <span class="na">stayOpen</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// [0.3.0] Boolean</span> <span class="na">width</span><span class="p">:</span> <span class="kc">null</span><span class="p">,</span> <span class="c1">// [0.2.0] Integer, String, null</span> <span class="na">cbComplete</span><span class="p">:</span> <span class="kc">undefined</span><span class="p">,</span> <span class="c1">// [0.5.0] Function</span> <span class="na">cbEmpty</span><span class="p">:</span> <span class="kc">undefined</span><span class="p">,</span> <span class="c1">// [0.5.0] Function</span> <span class="na">cbLoopItem</span><span class="p">:</span> <span class="kc">undefined</span><span class="p">,</span> <span class="c1">// [0.4.0] Function</span> <span class="na">cbLoopGroup</span><span class="p">:</span> <span class="kc">undefined</span> <span class="c1">// [0.4.0] Function</span> <span class="p">});</span> </code></pre> </div> <p>I really appreciate any useful issue, pull request or suggestion. And I'm grateful to everyone who leaves jQuery and learning / using pure JavaScript instead. Thanks!</p> <p>You can find the <strong>tail.select</strong> script on <a href="https://github.com/pytesNET/tail.select">GitHub</a> as well as on <a href="https://www.npmjs.com/package/tail.select">npm</a>. And, of course, you can also visit the <a href="https://github.pytes.net/tail.select/">official demonstration page</a> to see the script in action.</p> <p>Thanks for reading.</p> <p>Sincerely,<br> Sam <a href="https://www.twitter.com/pytesNET">@pytesNET</a>.</p> javascript select html package