Скрипт поиска по странице на JavaScript и его связка со сниппетом csv2html в MODX

javascript modx csv2html поиск

Для одного из проектов, который был сделан на базе CMS MODX Evolution, мне необходимо было организовать вывод списка товаров из файла в формате CSV на страницу в виде HTML-кода. В этом мне помог сниппет CSV2HTML, который я нашел в хранилище на официальном сайте MODX. Там же вы можете найти описание и инструкцию по установке сниппета. Ниже привожу свою краткую инструкцию.

Установка сниппета CSV2HTML

В панели администрирования сайта (напоминаю, что у меня сайт сделан на MODX EVO) создаем новый сниппет с именем csv2html и вставляем в него следующий код:

<?php

if (!class_exists('parseCSV'))
    include_once ($modx->config['base_path'].'assets/snippets/csv2html/parsecsv/parsecsv.lib.php');
if (!class_exists('c2hChunkie'))
    include_once ($modx->config['base_path'].'assets/snippets/csv2html/chunkie/chunkie.class.inc.php');
$csv = isset($csv) ? $csv : '';
$tplOuter = isset($tplOuter) ? $modx->getChunk($tplOuter) : "
    
";
$tplHeading = isset($tplHeading) ? ($tplHeading != '') ? $modx->getChunk($tplHeading) : ' ' : false;
$tplContent = isset($tplContent) ? ($tplContent != '') ? $modx->getChunk($tplContent) : ' ' : false;
$heading = isset($heading) ? $heading : true;
$conditions = isset($conditions) ? $conditions : null;
$sortBy = isset($sortBy) ? $sortBy : null;
$sortDir = isset($sortDir) ? (strtoupper($sortDir) == 'DESC' && isset($sortBy)) : false;
$offset = isset($offset) ? (int) $offset : null;
$limit = isset($limit) ? (int) $limit : 10;
$fields = isset($fields) ? explode(',', $fields) : array();
$phx = isset($phx) ? $phx : 0;
if (is_numeric($csv)) { // MODx document
    $csvFile = $modx->getDocument($csv, '*', 1);
    $csvFile = $csvFile['content'];
} elseif (substr($csv, 0, 4) == 'http') { // URL
    $curl_handle = curl_init();
    curl_setopt($curl_handle, CURLOPT_URL, $csv);
    curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT, 2);
    curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER, 1);
    $csvFile = curl_exec($curl_handle);
    curl_close($curl_handle);
} elseif (substr($csv, 0, 6) == 'assets') { // relative to MODx base_path
    $csvFile = $modx->config['base_path'].$csv;
} else { // otherwise absolute server path
    $csvFile = $csv;
}
if ($csvFile == '')
    return 'Error with parameter &csv=`'.$csv.'`: CSV source not found!';
$csvObject = new parseCSV();
$csvObject->heading = $heading;
$csvObject->conditions = $conditions;
$csvObject->sort_by = $sortBy;
$csvObject->offset = $offset;
$csvObject->limit = $limit;
$csvObject->sort_reverse = $sortDir;
$csvObject->fields = $fields;
if (!$csvObject->auto($csvFile))
    return 'Error with parameter &csv=`'.$csvFile.'`: CSV data not readable!';
# Output result.
//return print_r($csvObject, true);
if ($heading) {
    if (!$phx || !$tplHeading) {
        $fields = array();
        $values = array();
        foreach ($csvObject->titles as $field=>$value) {
            $fields[] = '';
            $values[] = iconv('CP1251', 'UTF-8', $value);
        }
        if (!$tplHeading) {
            $heading = ''.implode("\r\n", $values).'';
        } else {
            $heading = str_replace($fields, $values, $tplHeading);
        }
    } else {
        $phxHeading = new c2hChunkie($tplHeading);
        foreach ($csvObject->titles as $field=>$value) {
            $phxHeading->AddVar($field, $value);
        }
        $heading = $phxHeading->Render();
    }
}
$content = '';
foreach ($csvObject->data as $key=>$row) {
    if (!$phx || !$tplContent) {
        $fields = array();
        $values = array();
        foreach ($row as $field=>$value) {
            $fields[] = '';
            $values[] = iconv('CP1251', 'UTF-8', $value);
        }
        if (!$tplContent) {
            $content .= ''.implode("\r\n", $values).'';
        } else {
            $content .= str_replace($fields, $values, $tplContent);
        }
    } else {
        $phxContent = new c2hChunkie($tplContent);
        foreach ($row as $field=>$value) {
            $phxContent->AddVar($field, $value);
        }
        $content .= $phxContent->Render();
    }
}
$output = str_replace('', $heading.$content, $tplOuter);
return $output;
?>

Сохраняем сниппет.

Вывод на страницу данных сниппета CSV2HTML

Вывод содержимого документа в формате CSV осуществляется следующей конструкцией:

[[csv2html? &csv=`assets/files/gw_air.csv` &heading=`1` &offset=`0` &limit=`300`]]

Проблема с кодировкой в выводимых данных на страницу

Скорее всего вы столкнулись бы с проблемой в кодировке выводимого текста из файла, если бы использовали код сниппета с официального сайта. Для исправления этой ошибки необходимо было внести следующие изменения в исходный код:

строку $values[] = $value; заменяем на $values[] = iconv('CP1251', 'UTF-8', $value);

Обратите внимание, что в исходном коде таких строчек две

См. также небольшую статью Проблема с кодировкой в работе сниппета CSV2HTML

Код сниппета, который указан у меня выше, уже содержит коррективы. Вносить корректировки нет необходимости.

Теперь, когда данные из таблицы у нас выводятся на странице, организуем поиск по странице.

Организация поиска текста по странице

Поиск по странице был организован на JavaScript:

var lastResFind=""; // последний удачный результат
var copy_page=""; // копия страницы в исходном виде
function TrimStr(s) {
     s = s.replace( /^\s+/g, '');
  return s.replace( /\s+$/g, '');
}
function FindOnPage(inputId) {//ищет текст на странице, в параметр передается ID поля для ввода
  var obj = window.document.getElementById(inputId);
  var textToFind;
 
  if (obj) {
    textToFind = TrimStr(obj.value);//обрезаем пробелы
  } else {
    alert("Введенная фраза не найдена");
    return;
  }
  if (textToFind === "") {
    alert("Вы ничего не ввели");
    return;
  }
  
  if(copy_page.length>0)
        document.body.innerHTML=copy_page;
  else copy_page=document.body.innerHTML;

  
  document.body.innerHTML = document.body.innerHTML.replace(eval("/name="+lastResFind+"/gi")," ");//стираем предыдущие якори для скрола
  document.body.innerHTML = document.body.innerHTML.replace(eval("/"+textToFind+"/gi"),""+textToFind+""); //Заменяем найденный текст ссылками с якорем;
  lastResFind=textToFind; // сохраняем фразу для поиска, чтобы в дальнейшем по ней стереть все ссылки
  window.location = '#'+textToFind;//перемещаем скрол к последнему найденному совпадению
 } 

Код был найден на одном из сайтов в интернете - источник.

Код для формы поиска:

<h2>Форма поиска</h2><input type="text" id="text-to-find" value=""> <input type="button" onclick="javascript: FindOnPage('text-to-find'); return false;" value="Искать" class="btn btn-primary" style="margin-bottom: 10px;"/><br/><i>Введите слово или фразу для поиска.</i><hr/>

Исходный код был немного изменен в части дизайна: так как сайт создан с использованием фреймворка Bootstrap, поэтому я использовал элементы этого фреймворка для оформления визуальной части кода. Вот что у меня получилось:

Некоторые особенности работы:

• Скрипит ищет точное совпадение, либо ищет вхождение запроса в частях слов
• Все совпадения помечаются маркером
• Страница автоматически прокручивается до первого совпадения
• При вводе нового запроса, элементы страницы, помеченные маркерами с прошлого поиска, возвращаются к исходному оформлению

Данный вариант является довольно простым и рабочим решением если вам необходимо вывести таблицу из Excell на страницу и организовать поиск по ней. В свою очередь, вы можете использовать и модернизировать данный код для своих нужд.