other

by sabbin

HTML

@extends('layouts.appjson') @section('title', '確認画面') @section('content')


<div class="container">
  <div class="row">

    <div class="col-md-12">


      <form action="{{ url('conf') }}" method="POST" class="form-horizontal" enctype="multipart/form-data">
        {{ csrf_field() }} @if( $errors->has('item_body'))
        <span style="color:red">ERROR {{ $errors->first('item_body')}}</span> @endif

        <table class="table table-hover" cellpadding="3px">
          @foreach ($items as $item)

          <tr>
            <td>〒 {{ $item->zip }}</td>
          </tr>
          <tr>
            <td>{{ $item->ad1 }}{{ $item->ad2 }}{{ $item->ad3 }}</td>
          </tr>
          <tr>
            <td>{{ $item->co }}</td>
          </tr>
          <tr>
            <td>{{ $item->sec }}</td>
          </tr>
          <tr>
            <td>{{ $item->name }}</td>
          </tr>
          <tr>
            <td>
              @include('pn.area_kp')
            </td>
          </tr>

          <tr>
            <td>

            </td>
          </tr>


          <tr>
            <td>担当：<input type="text" class="form-control" name='title' value="" placeholder="login then the name show up"></td>
          </tr>
          <tr>
            <td>発送先によって自動選択される-> @include('pn.ship_from')
            </td>
          </tr>
          <tr>
            <td>

              <div id="container">

              </div>


            </td>
          </tr>
          <tr>
            <td>
              <div class="btn-group">
                <input type="text" name="search2" id="search2" placeholder="製品 その２" class="form-control" size="3000" onkeypress="return event.keyCode!=13" />
                <span class="searchclear glyphicon glyphicon-remove-circle"></span>
              </div>
              <ul class="list-group" id="result2"></ul>
            </td>
          </tr>

          <tr>
            <td>
              <div class="btn-group">
                <input type="text" name="search3"...

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) => {
  // Change the path below with the path for your script
  $.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>`
    )
  });
}