jquery-ui autocomplete from csv file

Я совершенно новый в jquery и «код» совсем не моя специальность, поэтому мой вопрос будет очень тривиальным, поскольку я не совсем понимаю все части кода, который я пишу который сделан из частей я отборные в различных учебных пособиях ...jquery-ui autocomplete from csv file

что мне нужно сделать:

построить форму с двумя полями (в WordPress сайта): 1) где тип пользователя несколько букв и которые должны автозаполняться в соответствии со списком видов, которые хранятся в CSV-файле (загруженном на моем сервере); 2) второе поле, в котором число (уникальная идентификация вида) должно появляться после того, как вид выбран/записан в первом поле.

Как CSV-файл состоит из: Это простая .xls таблица зарегистрирована в формате CSV; первая строка является именем колонки: «Вид», «Identifiant» и # 2 до # 14000 строк видовые имена и идентификационные номера:

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

До сих пор я только успевай имеют вид автозаполненной формы, создавая массив со всеми именами видов (см. код ниже), но поскольку у меня 14000 видов, массив очень большой, а процесс поиска довольно длинный ... И нет ссылки на базы данных и, конечно же, нет возможности автоматически заполнить второе поле с помощью вида вида ...

<!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-файл, в котором имена и идентификаторы имени хоста, например, назван: «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/

Я первый проконсультировать против вызова CSV с 14,000 записей через HTTP GET. Это было бы намного быстрее для сбора и поиска, если бы оно было сохранено или перенесено в базу данных.

Что все сказано, это можно сделать, просто не ожидайте, что это будет быстро. Вы можете настроить его, чтобы каждый раз, когда набирается буква, этот скрипт должен будет собирать весь файл 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

ответ

Смежные вопросы