Question

我在jquery中是全新的，“代码”完全不是我的专长，所以我的问题可能会非常微不足道，因为我并不真正理解我编写的代码的所有部分，这些部分是由我选择的部分组成的在不同的教程......

我需要做什么：

构建一个包含两个字段的表单（在wordpress网站中）： 1）用户键入几个字母，必须根据存储在.csv文件中的物种列表自动完成（在我的服务器上传）; 2）第二个字段，在第一个字段中选择/写入的物种后，必须出现一个数字（物种唯一标识）。

如何制作csv文件：这是一个在.csv中注册的简单.xls表;第一行是列名：“Species”，“Identifiant”和＃2到＃14000行是物种名称和id号：

Species,Identifiant, Species A,320439, Species B,349450, Species C,43435904, [etc...]

到目前为止，我只通过创建一个包含所有物种名称的数组（见下面的代码）来设法获得一种自动完成形式，但由于我有14000种物种，因此阵列非常大，搜索过程是很长......并且没有与数据库的链接，当然也没有可能用物种ID自动填充第二个字段......

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var availableTags = [
      "Species A",
      "Species B",
      "Species C",
      [etc...]
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );
  </script>
</head>
<body>
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
</body>
</html>

主机种类名称和id的.csv文件例如命名为：“reference.csv”并存储在：www.mywebsite / referencials / reference.csv

有人能给我提供线索来指出这个文件和好的原始文件而不是代码中实现的数组吗？

非常感谢您的帮助！

Answer 1

以下是一种可以执行此操作的方法的示例：

https://jsfiddle.net/Twisty/rnuudsap/

我首先建议不要通过HTTP GET拨打包含14,000个条目的CSV。如果将其存储或移动到数据库，收集和搜索会更快。

所有人都说，它可以做到，只是不要指望它快。您可以设置每次键入字母时，此脚本必须收集整个CSV文件，然后搜索或查找内容。

如果内容是静态的，您可以将数据从CSV格式一次更改为JSON格式，并通过JavaScript将其包含一次。这将有助于您的脚本变得更快。我已将此示例配置为收集CSV一次，并在全局范围内使用它。这将导致脚本在浏览器中使用更多内存。

如果你有以下HTML，你的jQuery可能如下所示：

<强> HTML

<div class="ui-widget">
  <label for="species">Species: </label>
  <input id="species">
  <label for="identifiant">Identifiant: </label>
  <input id="identifiant" style="width: 6em;">
</div>

<强>的JavaScript

$(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("reference.csv", 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;
    }
  });
});

我们使用此处的答案：How to read data From *.CSV file using javascript?

因此，如果我们获得CSV数据：

Species,Identifiant
Species A,320439
Species B,349450
Species C,43435904
Species D,320440
Species E,349451
Species F,43435905

processData()函数会将其解析为我们想要自动完成的数据数组。

查看更多：

来自csv文件的jquery-ui自动完成

1 个答案: