從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自動完成

回答

相關問題