Example JSON

by sabbin

HTML

<div id="container">

</div>

CSS

.fieldContainer {
  margin-bottom: 16px;
}

JavaScript

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

  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) => {
  $.getJSON('https://api.myjson.com/bins/lpizs', (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>`
    )
  });
}