从csv文件jquery-ui自动完成

我完全是新的jquery和“代码”根本不是我的专业，所以我的问题可能会非常微不足道，因为我真的不明白我写的代码的所有部分是从部分我在不同的教程采摘制作...从csv文件jquery-ui自动完成

我需要做什么：

建有两个字段（一个WordPress网站）的一种形式： 1）其中，用户类型几个字母，必须根据存储在.csv文件中的物种列表（需要上传到我的服务器）自动完成; 2）第二个字段，其中一个数字（物种唯一识别符）必须出现在第一个字段中选择/写入的物种之后。

如何CSV文件由：它以.csv注册一个简单的.xls表;第一行是列名：“种”，“Identifiant”和＃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>

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

任何人都可以给我提示这个文件的线索，好的原料，而不是在代码中实现的数组？

非常感谢您的帮助！

来源

2017-02-19 RPO

首先，来看看这个：http://stackoverflow.com/questions/7431268/how-to - 读取数据从 - 使用CSV文件-JavaScript的 – Twisty

这里是你可以做到这一点的一种方式工作示例：

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()功能将它解析为我们想为自动完成数据的阵列。

查看更多：

来源

2017-02-20 19:05:21 Twisty

从csv文件jquery-ui自动完成

回答

相关问题