jquery-ui autocomplete from csv file

Question

I am totally new in jquery and "code" is not at all my speciality, so my question will may be very trivial as I don't really understand all the parts of the code I write that is made from parts I picked in different tutorials...

What I need to do :

Build a form with two fields (in a wordpress website) : 1) where user type a few letters and which have to autocomplete according to a list of species which are stored in a .csv file (uploaded in my server) ; 2) a second field where a number (the species unique identifiant) have to appear after the species selected/written in the first field.

How csv file is made : It's a simple .xls table registered in .csv ; the first row is the columns name : "Species", "Identifiant" and the #2 to #14000 rows are species names and id numbers :

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

Up to now, I only manage to have a kind of autocomplete form by creating an array with all the species names (see code below), but as I have 14000 species, the array is very big, and the searching process is quite long... And there is no link to the data base and certainly no possibility to automatiquely fill the second field with the species'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>

The .csv file which host species names and id is for example named : "reference.csv" and is store at : www.mywebsite/referencials/reference.csv

Could anyone give me clues to indicate this file and the good raws instead of the array implemented in the code ?

Many thanks for the help !

First, take a look at this: http://stackoverflow.com/questions/7431268/how-to-read-data-from-csv-file-using-javascript — Twisty, Feb 20 '17 at 16:48

score 1 · Answer 1 · edited May 23 '17 at 12:00

Here is a working example of one way you could do this:

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

I would first advise against calling a CSV with 14,000 entries via HTTP GET. This would be much faster to collect and search if it was stored or moved to a database.

That all said, it can be done, just do not expect it to be fast. You could set it up that every time a letter is typed, this script will have to collect the entire CSV file and then search or find the content.

If the content is static, you could do a one time change of the data from CSV format to JSON format and include it once via JavaScript. This will help your script to become faster. I have configured this example to collect the CSV once, and use it more globally. This will cause the script to use a lot more memory in the browser.

If you have the following HTML, your jQuery might look like this:

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;
    }
  });
});

We make use of the answer found here: How to read data From *.CSV file using javascript?

So if we get CSV Data like:

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

The processData() function will parse it into the array of data we want for Autocomplete.

See More:

jquery-ui autocomplete from csv file

1 Answers1