根据其他输入填充输入

Question

我有一个包含 2 个输入的表单，其中第一个输入具有 datalist 属性。

 <div class="col-xs-4">
     <input name="description" type="text" id="ajax" list="json-datalist">
     <datalist id="json-datalist"></datalist>
  </div>

  <div class="col-xs-2">
      <input type="text" name="product" />
  </div>

JSON 文件具有这种格式

[ {
        "product":"1235",
        "description":"description 1"
      },
      {
        "product":"1325",
        "description":"description 2"
      }, 
      ...
  ]

我想要的是当用户选择 description 之一，然后在第二个输入中添加 product..

这里是 javascript 的代码，其中将 JSON 文件加载到表单

var dataList = document.getElementById('json-datalist');
    var input = document.getElementById('ajax');
    var request = new XMLHttpRequest();

    request.onreadystatechange = function(response) {
      if (request.readyState === 4) {
        if (request.status === 200) {
          // Parse the JSON
          var jsonOptions = JSON.parse(request.responseText);

          // Loop over the JSON array.
          jsonOptions.forEach(function(item) {
            // Create a new <option> element.
            var option = document.createElement('option');
            // Set the value using the item in the JSON array.
            option.value = item.description; 
                                               //<--
            // Add the <option> element to the <datalist>.
            dataList.appendChild(option);
          });

          // Update the placeholder text.
          input.placeholder = "e.g. datalist";
        } else {
          // An error occured :(
          input.placeholder = "Couldn't load datalist options :(";
        }
      }
    };

    // Update the placeholder text.
    input.placeholder = "Loading options...";

    // Set up and make the request.
    request.open('GET', 'myfile.json', true);
    request.send();

如何在选择 item.description 时将 item.product 作为值添加到第二个输入？

Answer 1

您可以创建带有指示产品的其他属性的 <option> 元素，然后使用该属性将其复制到第二个输入中。

request.onreadystatechange = function(response) {
  if (request.readyState === 4) {
    if (request.status === 200) {
      // Parse the JSON
      var jsonOptions = JSON.parse(request.responseText);

      // Loop over the JSON array.
      jsonOptions.forEach(function(item) {
        // Create a new <option> element.
        var option = document.createElement('option');
        // Set the value using the item in the JSON array.
        option.value = item.description;
        $(option).attr('data-product',item.product);//THIS IS THE NEW LINE
                                           //<--
        // Add the <option> element to the <datalist>.
        dataList.appendChild(option);
      });

      // Update the placeholder text.
      input.placeholder = "e.g. datalist";
    } else {
      // An error occured :(
      input.placeholder = "Couldn't load datalist options :(";
    }
  }
};

然后，为了复制它，如果您使用 JQuery:

$('input#ajax').change(function(){
  $('input[name="product"]').val($('#json-dataList').find('option:selected').attr('data-product'));
});

Answer 2

在 datalist 的数据属性中设置 product，如下所示。

option.value = item.description; //after this line
option.setAttribute('data-product', item.product);

并在 description 中将事件集 product 更改为第二个输入，如下所示使用 jquery。

$('#ajax').change(function() {
        var description = $(this).val();
        var product = $('#json-datalist > option[value="' + description + '"]').data('product');
        $('input[name=product]').val(product);
    });

完整的 JS 代码如下。希望这有帮助。

var dataList = document.getElementById('json-datalist');
    var input = document.getElementById('ajax');
    var request = new XMLHttpRequest();

    request.onreadystatechange = function (response) {
        
        if (request.readyState === 4) {
            if (request.status === 200) {
                // Parse the JSON
                var jsonOptions = JSON.parse(request.responseText);
                
                // Loop over the JSON array.
                jsonOptions.forEach(function (item) {
                    // Create a new <option> element.
                    var option = document.createElement('option');
                    // Set the value using the item in the JSON array.
                    option.value = item.description;
                    option.setAttribute('data-product', item.product);
                    //<--
                    // Add the <option> element to the <datalist>.
                    dataList.appendChild(option);
                });

                // Update the placeholder text.
                input.placeholder = "e.g. datalist";
            } else {
                // An error occured :(
                input.placeholder = "Couldn't load datalist options :(";
            }
        }
    };

    // Update the placeholder text.
    input.placeholder = "Loading options...";

    // Set up and make the request.
    request.open('GET', 'myfile.json', true);    
    request.send();
    

    $(function() {
        $('#ajax').change(function() {
            var description = $(this).val();
            var product = $('#json-datalist > option[value="' + description + '"]').data('product');
            $('input[name=product]').val(product);
        });
    });

根据其他输入填充输入

Fill an input based on other input

javascript

jquery

json

html-datalist