AutoComplete

by ducka

HTML

<div class="tokenselector">
        <div class="token">
            <span>Title</span>
        </div>
        <div class="token">
            <span>Title</span>
        </div>
        <div class="token">
            <span>Title</span>
        </div>
        <div class="token">
            <span>Title</span>
        </div>
        <div class="token">
            <span>Title</span>
        </div>
        <div class="token">
            <span>Title</span>
        </div>
        <div class="token">
            <span>Title</span>
        </div>
        <div class="token">
            <span>Title</span>
        </div>
        <div class="typeahead">
            <input class="hint" type="text" disabled="disabled" value="Title" />
            <input class="query" type="text" value="Tit" />
        </div>
    </div>

CSS

div {
    outline: 1px solid blue;
}


.tokenselector {
            width: 200px;
            font-size: 15px;
            line-height: 30px;
        }

        .tokenselector > div {
            display: inline-block;
        }

        .token {
            width: 50px;
        }

        .typeahead {
            position: relative;
        }

        .typeahead input {
            width: 50px;
            border: none;
            outline: none;
            margin: 0;
            padding: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
            background: transparent;
        }

        .typeahead .hint {
            position: absolute;
            top: 7.5px; /* Top offset is calculated by (line-height - font-size / 2) where line-height > font-size*/
        }

        .typeahead .query {
            position: relative;
        }