Как установить значение в поле ввода текста

Question

У меня есть этот код ниже.Я могу отобразить список файлов JSON, но не могу щелкнуть пункты списка.Не могли бы вы научить меня, как добавить функцию щелчка и сохранить элемент.То, что я хотел бы сделать, это щелкнуть элемент списка. После этого щелкните значение «NAME» для сохранения текстового поля.Итак, после установки значения нажмите кнопку Отправить, затем передайте ИМЯ и связанные данные.Например.Данные кулака https://api.myjson.com/bins/8x0ag

Название данных кулака оранжевое.Когда пользователь нажимает на оранжевый.и нажмите кнопку отправки. Я хочу отправить код "102" и данные о местоположении "N34" на следующую страницу.

name     "orange"
code     "102"
location "N34"

На самом деле у меня был другой код.Чтобы выбрать элемент и сохранить значение в текстовом поле.но я изменил код после того, как потерял функцию выбора.

$(document).ready(function() {
  Main.init();
});

var Main = (function($) {
  return {
    vars: { },
    init: function() {
      Main.build();
      Main.events();
    },
    events: function() {
      $(document).on('keyup', '.search', function() {
        const ref = $(this).attr('data-ref');
        const {
          vars
        } = Main;
        $(`.resultUl[data-ref="${ref}"]`).html('');
        const searchField = $(this).val();
        const expression = new RegExp(searchField, "i");

        $.each(vars.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>`
            );
          }
        });
      });
    },
    build: async function() {
      JSONdata = await this.getJson();
      this.vars = {
        JSONdata
      };
      this.generateFields(20);
    },
    getJson: () => new Promise((resolve, reject) => {
      $.getJSON('https://api.myjson.com/bins/8x0ag', (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>`
        )
      });
    },
  }
})($);

Я пытался добавить этот код выше, но он не работает.

$('#result').on('click', 'li', function() {
var name = $(this).data('name' ); 
var code = $(this).data('code' ); 
var location = $(this).data('location' ); 

var click_text = $(this).text().split('|');
$('#search').val($.trim(click_text[0]));
$("#result").html('');


$('#result').after('<input type="hidden" name="name" value="'+name+'">');
$('#result').after('<input type="hidden" name="code" value="'+code+'">');
$('#result').after('<input type="hidden" name="location" value="'+location+'">');    
});

Answer 1

В основном вам нужен обработчик event для onClick для элементов li.

Он задает имя в качестве значения в видимых полях и создает hidden входные данные в formгде вы можете иметь столько переменных, сколько захотите, но сериализовать их любым способом

Вот ваш рабочий пример

$(document).ready(function() {
  Main.init();
});

var Main = (function($) {
  return {
    vars: {

    },
    init: function() {
      Main.build();
      Main.events();
    },
    events: function() {
      $(document).on('keyup', '.search', function() {
          const ref = $(this).attr('data-ref');
          const {
            vars
          } = Main;
          $(`.resultUl[data-ref="${ref}"]`).html('');
          const searchField = $(this).val();
          const expression = new RegExp(searchField, "i");

          $.each(vars.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 list-item"
          					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>
               `
              );
            }
          });
        }),
        $(document).on('click', '.list-item', function() {
          const ul = $(this).closest('ul');
          const ref = $(ul).attr('data-ref');
          const name = $(this).attr('data-name');
          const location = $(this).attr('data-location');
          const code = $(this).attr('data-code');
          const hiddenInput = $(`.hiddenField[data-ref=${ref}]`);
          //console.log(hiddenInput.length);
          $(`.search[data-ref=${ref}]`).val(name);
          if (hiddenInput.length) {
            $(hiddenInput).val(`${name}_${location}_${code}`);
          } else {
            $('#submitForm').append(
              `<input 
                 type="hidden" 
                 class="hiddenField" 
                 data-ref="${ref}"
                 name="search_${ref}" 
                 value="${name},${location},${code}}"
             />
            `
            )
          }
          $(ul).html('');
        })
    },
    build: async function() {
      JSONdata = await this.getJson(); //JSONdata is a global variable which you can access from everywhere
      this.vars = {
        JSONdata
      };
      this.generateFields(20);
    },
    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>`
        )
      });
    },

  }
})($);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <title>JQuery</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>

<body>
  <br /><br />
  <div class="container" style="width:900px;">
    <h2 align="center"></h2>
    <h3 align="center"></h3>
    <br /><br />
    <div align="center">
      <div id="container">

      </div>
      <br />
      <form action="recive.php" method="post" id="submitForm">
        <input type="submit" id="submit" />
      </form>
    </div>


    <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>
</body>

</html>