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

【问题标题】：jquery-ui autocomplete from csv file来自csv文件的jquery-ui自动完成
【发布时间】：2017-02-19 11:44:18
【问题描述】：

我是 jquery 的新手，“代码”根本不是我的专长，所以我的问题可能很琐碎，因为我并不真正理解我编写的代码的所有部分，这些部分是由我选择的部分组成的在不同的教程中...

我需要做什么：

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

如何制作 csv 文件：这是一个在 .csv 中注册的简单 .xls 表；第一行是列名：“物种”、“标识符”，#2 到 #14000 行是物种名称和编号：

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

谁能给我线索来指出这个文件和好的原始数据，而不是代码中实现的数组？

非常感谢您的帮助！

【问题讨论】：

首先，看看这个：stackoverflow.com/questions/7431268/…

标签： jquery wordpress csv jquery-ui autocomplete

【解决方案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() 函数会将其解析为我们想要用于自动完成的数据数组。

查看更多：

【讨论】：