JSFiddle - React, Tailwind, and code Playground

by bitstarr

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<p>Testcase</p>

<select name="test1" id="test1" class="jsSelectPro field field1">
    <option>Select me</option>
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="3">Value 3</option>
    <option data-unique="true">Unique Value</option>
</select>

<select name="test2" id="test2" class="jsSelectPro field field2 foobar">
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="3">Value 3</option>
    <option data-unique="true">Unique Value</option>
</select>
<span class="jsReturnMessage hasTooltip icoReturn"><span class="tooltip">Just click ESC to return to select field!</span></span>

<select name="test3" id="test3" class="jsSelectPro field field3 foobar">
    <option value="1">Value 1</option>
    <option data-unique="true">Unique Value</option>
</select>
<span class="jsReturnMessage hasTooltip icoReturn"><span class="tooltip">The Return Message on field focus. Simply click ESC now!</span></span>

<p>Testcase mit Validierung</p>

<form class="jsFormValidate" method="POST">
    <input value="Dummy field" class="number field field4" />
    <br />
    <select name="test4" id="test4" class="jsSelectPro required field field4">
        <option value="">Select me</option>
        <option value="1">Value 1</option>
        <option value="2">Value 2</option>
        <option value="3">Value 3</option>
        <option data-unique="true">Unique Value</option>
    </select>
    <br/><br/>
    <button class="field">Hit me</button>
</form>

CSS

body {padding:0 1em}
p {background:#e5e5e5;padding:0.5em;margin:2em 0}

/* select und eingabefeld */
.field {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
width:200px;font-size:1.25em;padding:0.5em;border:1px solid #ddd;vertical-align:middle;}
.foobar {border-color:#aaa;background:#e5e5e5}
/* visuelle kennzeichnung */
option[data-unique] {color:red}

/* tooltip nachbau */
.hasTooltip {cursor:help;position:relative}
.hasTooltip:hover .tooltip {display:block}
.tooltip {background:red;color:#fff;position:absolute;display:none;top:-50%;left:0;padding:5px;height:50px;width:200px}

/* ico nachbau */
.icoReturn {background:red;margin-left:0.25em;display:inline-block;vertical-align:middle;height:30px;width:30px;display:none}

/* anzeige logik */
input.field + .icoReturn {display:inline-block}
.field3:focus + .hasTooltip .tooltip {display:block}

/* error */
.field + .error {background:red;color:#fff;padding:5px;margin-left:0.25em}

JavaScript

(function($) {
    var kit = window.kit || {};

    $.fn.selectPro = function () {
        /* return this */
        return this.each(function () {
            /* listen for change */
            $(this).on('change', function () {
                var select = $(this),
                    selectID = select.attr('id'),
                    selectClasses = select.attr('class'),
                    selectName = select.attr('name'), 
                    options = select.children('option'),
                    isUnique = options.filter(':selected').data('unique') || false,
                    input = $('<input />');

                if(isUnique === true) {
                    /* config input */
                    input.attr({
                        'id': selectID,
                        'class': selectClasses,
                        'name': selectName,
                        'type': 'text'
                    })
                    /* listen for keydown */
                    .on('keydown', function (event) {
                        if (event.which === 27) {
                            input.replaceWith(select);
                        }
                    });
                    /* switch to input */
                    select.val('').replaceWith(input).selectPro();
                }
            });
        });
    };

    $(function() {
        /* select pro starten */
        kit.initSelectPro = function () {
            $('select.jsSelectPro').selectPro();
        };
        kit.initSelectPro();

        /* validierung starten */
        kit.initValidate = function () {
            if (typeof $.fn.validate === 'function') {
                /* Formvalidierung aktivieren falls eingebunden */
                $('form.jsFormValidate').each(function () {
                    $(this).validate();
                });
            }
        }
        kit.initValidate();
    });
})(jQuery);