javascript - 如何将 csv 文件中的数据加载到表单字段中？

Question

我正在尝试将 HTML 表单与 csv 文件链接起来，以自动填充表单字段。根据用户在第一个字段中选择的内容，第二个字段应自动填充适当的值。当用户开始在第一个字段中输入时，输入字段会自动从 csv 文件中提取数据以显示可用选项。用户在字段中写完 3 个单词后，选项就会出现。

此外，为了避免代码中出现任何 CORS 问题，我在 CSV 文件 URL 中添加了额外的 URL，这使得任何 Web 应用程序都可以访问它。

我能够在网络上提供的示例的帮助下准备此代码。但是，我的代码无法正常工作。我尝试自己解决这个问题。但我对编码还不够了解。

谁能帮我解决这个问题吗？

<script>
$(function() { function processData(allText) { var record_num = 2; 
// or however many elements there are in each row 
var allTextLines = allText.split(/\r\n|\n/); var lines = []; var headings = allTextLines.shift().split(','); while (allTextLines.length > 0) { var tobj = {}, entry; entry = allTextLines.shift().split(','); tobj['label'] = entry[0]; tobj['value'] = entry[1]; lines.push(tobj); } return lines; } 

// Storage for lists of CSV Data

 var lists = []; 

// Get the CSV Content
 $.get("https://cors-anywhere.herokuapp.com/www.coasilat.com/wp-content/uploads/2019/06/file.txt  ", function(data) { lists = processData(data); }); $("#species").autocomplete({ minLength: 3, source: lists, select: function(event, ui) { $("#species").val(ui.item.label); $("#identifiant").val(ui.item.value); return false; } }); });)
</script>

 <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
         
  <form> 
  <div class="ui-widget"> <label for="species">Species: </label> <input id="species"> <label for="identifiant">Identifiant: </label> <input id="identifiant" style="width: 6em;"> </div></form>

Answer 1

这是修改后的答案，使用 jquery-ui 自动完成功能。

解决方案:$.get() 是一个异步函数(页面加载时数据不易获得)，因此 jquery-ui 自动完成功能不会使用更新的 lists[] 数组，因为它(看起来是这样)不适用于动态生成的数据。因此，必须使用 $.get() 回调函数中新到达的数据刷新自动完成的源。

$("#species").autocomplete('option', 'source',lists) - 这是关键行，因为它会更新自动完成的新数据源。

// Only needed for working example
var myCSV = "Species,Identifiant\r\n";
myCSV += "Species A,320439\r\n";
myCSV += "Species B,349450\r\n";
myCSV += "Species C,43435904\r\n";
myCSV += "Species D,320440\r\n";
myCSV += "Species E,349451\r\n";
myCSV += "Species F,43435905\r\n";
console.log(myCSV);

// Begin jQuery Code
$(function() {
  function processData(allText) {
    // var record_num = 2; // or however many elements there are in each row
    var allTextLines = allText.split(/\r\n|\n/);
    var lines = [];
    var headings = allTextLines.shift().split(',');
    while (allTextLines.length > 0) {
      var tobj = {},
        entry;
      entry = allTextLines.shift().split(',');
      /*
      Normally we'd read the headers into the object.
      Since we will be using Autocomplete, it's looking for an array of objects with 'label' and 'value' properties.
      tobj[headings[0]] = entry[0];
      tobj[headings[1]] = entry[1];
      */
      if (typeof entry[1] !== 'undefined') {
        let prefix = !entry[0].includes('Species') ? 'Species ' : ''
        tobj['label'] = prefix + entry[0];
        tobj['value'] = entry[1].trim();
        lines.push(tobj);
      }
    }
    return lines;
  }
  let lists = [];

  // For working example 
  // lists = processData(myCSV);
  // console.log('lists1', lists)

  // In your script you will get this content from the CSV File
  // Get the CSV Content
  $.get("https://cors-anywhere.herokuapp.com/www.coasilat.com/wp-content/uploads/2019/06/file.txt", function(data) {
    lists = processData(data);
    $("#species").autocomplete('option', 'source', lists)
    console.log('lists2', lists)
  });

  $("#species").autocomplete({
    minLength: 3,
    source: lists,
    focus: function(event, ui) {
      console.log(ui)
      $("#species").val(ui.item.label);
      return false;
    },
    select: function(event, ui) {
      $("#species").val(ui.item.label);
      $("#identifiant").val(ui.item.value);
      return false;
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<div class="ui-widget">
  <label for="species">Species: </label>
  <input id="species">
  <label for="identifiant">Identifiant: </label>
  <input id="identifiant" style="width: 6em;">
</div>

processData() 函数无法按照您提供的源代码正常工作，因此也必须进行修改。