JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<div style="position:relative">
<span class="nama-bank">Bank</span>
<input list="browsers" name="browser" id="none" class="bank">

<datalist id="browsers">
  <option value="BNI">
</datalist>
</div>

<div>
Resultnya: <span class="result"></span>
</div>

CSS

.nama-bank{
  position:absolute;
  top:0px;
  left:0px;
  bottom:0;
  padding:8px;
  border:1px solid black;
  background:#fafafa;
  box-sizing:border-box
  
}
.show{
  display:none
}

.bank{
padding:8px 54px;
border:1px solid black;
}

JavaScript

//107

// baron
$(document).ready(function () {
    window.banks = {0: "Lainnya", 1: "Mandiri", 2: "BCA"};

    $.each(banks, function(k, v) {
      if (k == 0) break;
      $('#browsers').append('<option value="'+ v +'">');
    });
});

var validOptions =[];
$("option").each(function(){
    validOptions.push($(this).val())      
});
previousValue = "";
console.log(validOptions)
$('#none').autocomplete({
    autoFocus: true,
    source: validOptions
}).keyup(function() {
    var isValid = false;
    for (i in validOptions) {
        if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) {
            isValid = true;
        }
    }
    if (!isValid) {
        $(this).css("color","red");
        $(".show").show()
        $(".result").text("lainnya");
    } else {
        previousValue = this.value;
        $(this).css("color","green")
        $(".show").hide()
        $(".result").text($("#none").val());
    }
    
    
    
    
});