JSFiddle - React, Tailwind, and code Playground

by sabbin

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>ライブサーチ リアルタイム検索 01/12/2019 JQuery　Search HTML Table Data by using JQuery</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <style>
      .fieldContainer {
        margin-bottom: 16px;
      }

      #result {
        position: absolute;
        width: 100%;
        max-width: 870px;
        cursor: pointer;
        overflow-y: auto;
        max-height: 400px;
        box-sizing: border-box;
        z-index: 1001;
      }

      .link-class:hover {
        background-color: #f1f1f1;
      }

    </style>
  </head>

  <body>
    <br /><br />

    <form action="recive.php" method="get">
      <div class="container" style="width:900px;">
        <h2 align="center"></h2>
        <h3 align="center"></h3>
        <br /><br />
        <div align="center">

          <div id="container">

          </div>

          <input type="text" name="item1" id="search" placeholder="" class="form-control" />
        </div>
        <ul class="list-group" id="result"></ul>
        <br /> II

        <div align="center">
          <input type="text" name="item2" id="search2" placeholder="" class="form-control" />
        </div>
        <ul class="list-group" id="result2"></ul>
        <br />
        <input type="submit" />
    </form>

  </body>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</html>

JavaScript

$(document).ready(async function() {
      $.ajaxSetup({
        cache: false
      });

      console.log('here');

      JSONdata = await getJson(); //JSONdata is a global variable which you can access from everywhere
      generateFields(20);

    });

    $(document).on('keyup', '.search', function() {
      const ref = $(this).attr('data-ref');

      $(`.resultUl[data-ref="${ref}"]`).html('');
      const searchField = $(this).val();
      const expression = new RegExp(searchField, "i");

      $.each(JSONdata, (key, value) => {
        const {
          name,
          location,
          code,
          image
        } = value;
        if (name.search(expression) != -1 || location.search(expression) != -1) {
          $(`.resultUl[data-ref="${ref}"]`).append(
            `<li 
          class="list-group-item link-class"
          data-name="${name}"
          data-code="${code}"
          data-location="${location}"
        >
          <img src="${image}" height="40" width="40" class="img-thumbnail" />
          ${name}
          <span class="text-muted">${location}</span>
         </li>`
          );
        }
      });
    });

    getJson = () => new Promise((resolve, reject) => {
      // Change the path below with the path for your script
      $.getJSON('data.json', (data) => {
        resolve(data);
      }).fail(function() {
        reject([]);
      })
    });

    generateFields = (fieldNumber) => {
      Array(fieldNumber).fill().map((v, i) => {
        const ref = i + 1;
        $('#container').append(
          `<div class="fieldContainer">
    <div class="btn-group">
      <input type="text" class="search" data-ref="${ref}" placeholder="製品 その１" class="form-control" size="3000" onkeypress="return event.keyCode!=13" />
      <span class="searchclear glyphicon glyphicon-remove-circle"></span>
    </div>
    <ul class="list-group resultUl" data-ref="${ref}"></ul>
    </div>`
        )
      });
    }