jquery-ui csvファイルからの自動完成

私はjqueryで全く新しいですし、 "code"は私の専門ではありませんので、私が書いたコードのすべての部分を本当に理解していないので、 1）ユーザーのタイプ： jquery-ui csvファイルからの自動完成

（ワードプレスのウェブサイトで）2つのフィールドを持つフォームをビルドします。それは

は私が行うために必要なもの...私は別のチュートリアルで選んだ部分から作られていますいくつかの文字と.csvファイル（私のサーバーにアップロードされている）に格納されている種のリストに従って自動補完する必要があります。 2）第1フィールドで選択/書いた種の後に番号（種固有の識別情報）を表示しなければならない第2フィールド。作られてどのようにCSVファイル
- ：それは.CSVに登録シンプルな.XLSテーブルです。＃14000に行は、種名とID番号である「種」、「Identifiant」と＃2：今まで
  
  Species,Identifiant, Species A,320439, Species B,349450, Species C,43435904, [etc...]
、私だけに管理する最初の行は列名です。すべての種の名前（下記のコードを参照）を使用して配列を作成することで一種のオートコンプリートフォームが作成されますが、14000種があるため配列が非常に大きく検索プロセスがかなり長くなります。データベースと2番目のフィールドを自動的に種の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に保存されています。

このファイルを示す手がかりは誰でも教えてください。コードで実装されている配列の代わりに良いraws？

多くのご協力ありがとうございます！私が最初にHTTP GET経由で14,000のエントリでCSVを呼び出すことに対して助言する

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

：ここ

2017-02-19 RPO

まず、このを見てみましょう：http://stackoverflow.com/questions/7431268/how-to -read-data-from-csv-file-using-javascript – Twisty

は、あなたがこれを行うことが一つの方法の実施例です。これは、データベースに格納または移動された場合、収集と検索がはるかに高速になります。

これはすべて実行できますが、速くなるとは予想していません。手紙が入力されるたびに、このスクリプトはCSVファイル全体を収集し、次に内容を検索または検索する必要があります。

コンテンツが静的な場合は、データをCSV形式からJSON形式に1回変更し、JavaScript経由で1回変更することができます。これはあなたのスクリプトがより速くなるのを助けるでしょう。この例では、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

jquery-ui csvファイルからの自動完成

答えて

関連する問題