JSFiddle - React, Tailwind, and code Playground

by doschni

HTML

<form>
    <div class="ui-widget">
        <input type="text" name="numbers" id="tags" class="input_text clearable" size="50" onkeyup="checkReceiver()" onkeydown="checkReceiver()" placeholder="Choose Receiver" tabindex="1" value="" autofocus>
        <br>  
        <br>     
        Receiver selected
        <input type="text" name="receiver" class="input_text_count iphonehidden" value="0" size="1" readonly> <br><br>Problems: <br>- it's only updating when press spacebar in the textfield<br>
            - is there a trigger to count the selected strings (Ron, Dan = count 2)?
    </div>
    <!-- end ui-widget -->
    <div id="senden_button">
        <input type="submit" value="Send" formaction="send.php" formmethod="post" tabindex="5">
    </div>
    <!-- end senden_button_login -->
</form>

CSS

.clearable {
    background:url(http://i.imgur.com/z7ZSYjt.png) no-repeat right -10px center;
    border:1px solid #999;
    padding:3px 18px 3px 4px;
    /* USE the same right padding in jQ! */
    border-radius:3px;
    transition: background 0.4s;
    /*REMOVE THIS LINE IF YOU ENCOUNTER ISSUES IN Chrome (Bug 02.2014)*/
}
/* (jQ addClass:) if input has value: */
 .clearable.x {
    background-position: right 5px center;
}
/* (jQ addClass:) if mouse is over the 'x' input area*/
 .clearable.onX {
    cursor:pointer;
}
.ui-widget {
    font-family: Arial, sans-serif;
}
/*! jQuery UI - v1.11.0 - 2014-06-26
* http://jqueryui.com
* Includes: core.css, accordion.css, autocomplete.css, button.css, datepicker.css, dialog.css, draggable.css, menu.css, progressbar.css, resizable.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css
* To view and modify this theme, visit...

JavaScript

function checkReceiver() {
    var str = document.forms[0].tags.value,
        regex = /417/igm, // 417 is the start of a dial number, as a workaround.
        count = str.match(regex),
        count = (count) ? count.length : 0;
    console.log(count);
    document.forms[0].receiver.value = count;
}


//function autocomplete multiple value:
$(function () {
    var availableTags = [
        "417 ActionScript",
        "417 AppleScript",
        "417 Asp",
        "BASIC",
        { label: "Robert", value: "417111111 n1" },
	    { label: "Alex", value: "41722222 n2" },
	    { label: "Bill", value: "417333333 n3" },
	    { label: "Jerry", value: "417444444 n4" },
	    { label: "Mickey", value: "417555555 n5" },
        "Ron",
        "Dan",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"];

    function split(val) {
        return val.split(/,\s*/);
    }

    function extractLast(term) {
        return split(term).pop();
    }

    $("#tags")
    // don't navigate away from the field on tab when selecting an item
    .bind("keydown", function (event) {
        if (event.keyCode === $.ui.keyCode.TAB && $(this).autocomplete("instance").menu.active) {
            event.preventDefault();
        }
    })
        .autocomplete({
        minLength: 0,
        source: function (request, response) {
            // delegate back to autocomplete, but extract the last term
            response($.ui.autocomplete.filter(
            availableTags, extractLast(request.term)));
        },
        focus: function () {
            // prevent value inserted on focus
            return false;
        },
        select: function (event, ui) {
            var terms = split(this.value);
            // remove the current input
            terms.pop();
            // add the selected item
            terms.push(ui.item.value);
            // add placeholder to get the comma-and-space at the end
     ...