JSFiddle - React, Tailwind, and code Playground

by Naeel Maqsudov

HTML

<form action="#">
    <label><span>sex</span><select name="s">
        <option value="">any</option>
        <option value="m">male</option>
        <option value="f">female</option>
        </select></label><br/>
    <label><span>name</span><input type="text" name='t'></label>
    <div class="t ddlist"></div>
</form>
<br>
<form action="#">
    <input type="hidden" name="s" value="m">
    <label><span>name</span><input type="text" name='t'></label>
    <div class="t ddlist"></div>
</form>
<br>
<form action="#">
    <input type="hidden" name="s" value="f">
    <label><span>name</span><input type="text" name='t'></label>
    <div class="t ddlist"></div>
</form>

CSS

form{
    border: 1px solid red;
}
label span{
    display: inline-block;
    width: 50px;
}
.ddlist{
    background-color:#fff;
    border: 1px solid #000;
    display: none;
    position: absolute;
    max-height:200px;
    overflow:scroll;
}
.ddlist div:hover{
    background-color:#444;
    color:#fff;
}

JavaScript

var jqXHR = null;
var JSONURL = 'http://mna.zz.mu/json.php?jsoncallback=?';

$('.ddlist').each(function(i,l){
    var lasttxt = null;
    $(l) // <-- это список
    //события списка
    .mouseenter(function(){$(this).addClass('noblur')})
    .mouseleave(function(){$(this).removeClass('noblur')})
    .on('click','div',null,function(){
        var ddlist = $(this).parent();
        var inp = ddlist.prev().children('input');
        inp.val($(this).text());
        ddlist.hide();
        })
    .on('enter','div',null,function(){
        var ddlist = $(this).parent();
        var inp = ddlist.prev().children('input');
        inp.val($(this).text());
        //ddlist.hide();
        })
    .prev().children('input') //  <-- это соотв.списку input
    //события input-а
    .dblclick(function(){ // на дв.щелчке открывать/закрывать список
        var inp = $(this);
        var ddlist = inp.parents('form')
            .children('.'+inp.attr('name')+'.ddlist');
        if(lasttxt==null){
            inp.keyup();
        }else{
            ddlist.toggle();
        }})
    .blur(function(){ // при уходе с input-а прятать список
        var inp = $(this);
        var ddlist = inp.parents('form')
        .children('.'+inp.attr('name')+'.ddlist')
        .filter(':not(.noblur)');
        ddlist.hide();})
    .keyup(function(){ // на клавишу - фильтровать список
        var inp = $(this);
        if(inp.val()==lasttxt)return; //если текст не поменялся, выход
        lasttxt = inp.val();
        var ddlist = inp.parents('form')
            .children('.'+inp.attr('name')+'.ddlist');
        //отмена предыдущего запроса (попробуйте её закомментировать)
        if(jqXHR) jqXHR.abort();
        //отправка нового запроса
        jqXHR = $.getJSON(
            JSONURL,inp.parents('form').serialize(),
            function(data){
                jqXHR = null;
                if(data.length == 0){
                    ddlist.hide();
                }else{
                   ...