JSFiddle - React, Tailwind, and code Playground

by lukerichison

HTML

<div class="body">
<div id="parcelsearch">
    <h4>Search text fields</h4>
    <div id="search_text">
        <p class="sub-info">
            Address, owner name, parcel ID
            <input type="checkbox" id="parcelsqC" title="Use Autocomplete"/>
            <label for="parcelsqC">use autocomplete</label>
        </p>
        <input type="search" id="parcelsq" placeholder="Search Parcels"/>
        <ul id="autocomplete">
            <li>3116 RODE RD</li>
            <li>3116 N ELEVENTH AVE</li>
            <li>3116 N TWELFTH AVE</li>
            <li>3116 TREMONT RD</li>
            <li>3116 KENSINGTON AVE</li>
            <li>3116 DEBBIE LN</li>
            <li>3116 AUTUMNWOOD WAY</li>
            <li>3116 WIMBERG AVE</li>
            <li>3116 CONDO OFFICE BLDG</li>
            <li>3116 W MARYLAND ST</li>
            <li>3116 WATERMAN DR</li>
            <li>3116 W INDIANA ST</li>
            <li>3116 IGLEHEART AVE</li>
            <li>3116 FOREST AVE</li>
            <li>3116 MARION AVE</li>
            <li>3116 HARTMETZ AVE</li>
            <li>3116 LINCOLN AVE</li>
            <li>3116 TIEMAN AVE</li>
            <li>3116 JACKSON CT</li>
            <li>3116 GRAHAM AVE</li>
            <li>3116 POLLACK AVE</li>
            <li>3116 S FREDERICK ST</li>
            <li>3116 N THIRD AVE</li>
            <li>3116 E CHERRY ST</li>
            <li>3116 ROSELAWN DR</li>
            <li>3116 ROSELAWN DR</li>
        </ul>
    </div>

    <h4>Search numeric values</h4>
    <p class="sub-info">Click the operators button to toggle between equals, less than, greater than, and range.</p>
    <ul id="search_numeric">
        <li>
            <label for="">Value</label>
            <input type="hidden" value="eq"/><button>=</button>
            <input type="number" placeholder="$100,000" min="0" step="1000"/>
            <span class="range" class="eq"> - <input type="number" placeholder="$100,000" min="0" step="1000"/></span>
        </li>
        <li>
            <label...

CSS

</style>
<meta
    name="viewport"
    content="width=device-width,
        initial-scale=1.0,
        maximum-scale=1.0,
        user-scalable=no" />
<style>
body {
    background-color: #deded9;
}
.body {
    position: relative;
}
h4 {
    font-size: 1.25em;
    border-bottom: 1px solid;
    margin-bottom: 0.25em;
}
p.sub-info {
    margin-top: 0;
    font-size: 0.75em;
}
#search_text p.sub-info label {
    font-style: italic;
}
#search_text p.sub-info input {
    margin-right: 0;
    padding-right: 0;
}
#search_text p.sub-info label,
#search_text p.sub-info input {
    float: right;
}
#parcelsq {
    width: 100%;
    padding: 0.25em;
    margin: 0 0 1px;
    box-sizing: border-box;
    position: relative;
    z-index: 11;
}
#autocomplete {
    position: absolute;
    background-color: white;
    width: 100%;
    z-index: 10;
    margin: 0;
    padding: 0;
    max-height: 30%;
    overflow: auto;
    box-shadow: 0 0.25em 0.5em rgba(0,0,0,0.4), inset 0 0.5em 0.5em -0.5em rgba(0,0,0,0.6);
    border: 1px inset #ddd;
    display: none;
    box-sizing: border-box;
}
#autocomplete li {
    list-style-type: none;
    padding: 0.25em 0.5em;
}
#search_numeric,
ul.numeric li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#search_numeric label {
    width: 3.5em;
    display: inline-block;
}
#search_numeric input {
    width: 6em;
}
#search_numeric button {
    width: 2em;
}
#search_numeric span.range {
    display: none;
}
#search_numeric span.range.ra{
    display: inline;
}
#search_boolean input {
    margin-right: 0.5em;
}

JavaScript

$('#search_numeric').find('button').click(function(){
    var operators = ['=','>','<','\u2025'],
        inputvals = ['eq','gt','lt','ra'],
        iPrev = (jQuery.inArray($(this).text(),operators)  )%operators.length,
        iNext = (jQuery.inArray($(this).text(),operators)+1)%operators.length,
        newInputval = inputvals[iNext];

    $(this).text(operators[iNext])
    .prev('input').val(newInputval)
    .siblings('span.range').removeClass(inputvals[iPrev]).addClass(newInputval);
});
$('#parcelsq').focus(function(){
    $('#autocomplete').css('display', 'block');
}).blur(function(){
    $('#autocomplete').removeAttr('style');
});