JSFiddle - React, Tailwind, and code Playground

by nathanlogan

HTML

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<div>
<p>Status: <span>waiting...</span></p>

<input type="text" placeholder="base" data-field="base" />
<input type="text" placeholder="voltage" data-field="voltage" />
<input type="text" placeholder="bulb" data-field="bulb" />
<input type="text" placeholder="color" data-field="color" />
</div>

CSS

div {
  max-width: 400px;
  margin: 20px auto;
}
input[type=text] {
  max-width: 50px;
  margin: 0 10px;
  padding: 5px 10px;
  border: 1px solid #999;
  border-radius: 5px;
}

JavaScript

const products = [
	{
  	id: 1,
    base: ['AARP', 'AARPP'],
    voltage: [120, 240, 480],
    bulb: ['LED', 'incandescent'],
    color: ['brass', 'silver', 'black']
  },
  {
  	id: 2,
    base: ['ANDALE', 'ANDALEARIBA'],
    voltage: [120, 240, 480],
    bulb: ['LED', 'fluorescent', 'incandescent'],
    color: ['brass', 'black']
  }
]

$('input').blur(function(){
	const $this = $(this)
  const attr = $this.data('field')
  let validEntry = 'bad'
  
  if (this.value.length) {
  	for (let i = 0; i<products.length; i++) {
    	if (products[i][attr].includes(this.value)) {
      	validEntry = 'good'
        break
      }
    }
    
    $('p span').text(validEntry)
  }
})