База даних у HTML

Передісторія

Власне мене давно просять зробити пошук для сайту. Там звичайно дуже мало чого шукати, але як зачепив на найближче майбутнє. У планах додавання нових одиниць для пошуку. Цей туманний і не вивчений мною альбіон SQL відлякував своєю загадковістю. Але не зберігати дані у файлах. Стоп, а чому б і ні? Шукати за допомогою JavaScript. Я подумав про те, що можна в скрипт завантажувати дані для пошуку тощо. Заразила мене ця ідея, і, коли я приступив до написання, подумав: "А навіщо так ускладнювати? Нехай все буде на сторінці, а пункти, що не підходять за характеристиками, будуть просто ховатися ". Заодно і сторінку пошуковикам видно з усіма результатами. Користувачеві доступні всі дані відразу, і залишається тільки вибирати автономно від сервера. Сторінку можна стиснути і в кеш покласти на повіки вічні.

Історія

HTML

Створив новий HTML файл і почав свої експерименти. Додав select:

<select id=""style" onchange=""filter_changed()">

< option value = «» > Стиль:</option>

< option > неокласицизм </option >

< option > постмодерн </option >

< option > псевдомодерн </option >

< option > неоготика </option >

</select>

Додав div з даними:

<div class=""home whiteframe">

<a class=""url" href="kirpich.example.com/#rust">

<img class=""image" src="kirpich.example.com/thmb/rust/rust_vid-1.jpg"/>

</a>

<div class=""name">

<a class=""url" href="kirpich.example.com/#rust">

«Руст»

</a>

</div>

< div class = "" style "> неокласицизм </div >

< div class = "" wall _ material "> керамічна цегла, утеплена мінеральною ватою </div >

<div class=""square">165.5</div>

<div class=""living_space">86</div>

<div class=""floors">2</div>

</div>

Вибирати що є. З чого теж є. Тепер залишилося зробити чим.

JavaScript

Створив JS файл.

І так перше що нам потрібно зробити - це обробити всі пункти. Це просто:

function filter_changed(){

var list = document.getElementsByClassName(""home");

for (var i=0;i<list.length;i++)

hide(list[i], is_filtred(list[i]));

}

Тепер треба визначити чи підходить цей пункт під задані характеристики.

function is_filtred(node){

if (no_text(node, ""style")) return true;

}

function no_text(node, filter){

var style_filter = get(document.getElementById(filter),[""value"]);

var home_style = get(node.getElementsByClassName(filter),[0,""textContent"]);

if (style_filter && (!home_style || (home_style.indexOf(style_filter)<0)))

return true;

}

Якщо ми не знаходимо заданої характеристики, то елемент ховається.

function hide(node, h){

node.style.display = h?""none":""block";

}

Так. З цим впоралися. Але є ще величини, які списком не задаси. Для них робимо фільтр.

function is_filtred(node){

if (no_text(node, ""style")) return true;

if (compare(node, ""square")) return true;

}

function compare(node, filter, comparer){

var square_filter = get(document.getElementById(filter),[""value"]);

var home_square = get(node.getElementsByClassName(filter),[0,""textContent"]);

if (square_filter && !home_square)

return true;

else if (square_filter && home_square){

square_filter = parseFloat(square_filter)

home_square = parseFloat(home_square)

if ((!comparer||comparer=="">")?square_filter > home_square:comparer==""<"?square_filter < home_square:comparer==""="?square_filter!=home_square:false)

return true;

}

}

Ну ось ніби і все. Ах так. Що ж за get такий?

function get(node, keys){

for (var i=0; (i<keys.length) && node; i++)

node = node[keys[i]];

return node

}

Він запобігає помилці, якщо раптом елемент або його властивість не знайдено.

CSS

Оскільки в HTML у нас представлені голі дані, а нам треба дати користувачеві розуміння, на що він дивиться, додаємо в CSS такі рядки.

.name::before{

content:«» Назва: ";

color: gray;

}

.style::before{

content:«» Стиль: ";

color: gray;

}

.wall_material::before{

content:"Матеріал стін: ";

color: gray;

}

.square::before{

content:"Загальна площа: ";

color: gray;

}

.square::after, .living_space::after{

content:"" кв. м ".;

color: gray;

}

.floors::before{

content:«» Поверхи: ";

color: gray;

}

.living_space::before{

content:«» Житлова площа: ";

color: gray;

}

Оскільки ці дані вторинні, ми даємо дійсно значущому контенту вийти на перший план, поставивши сірий колір цьому тексту.

Ув'язнення

Просто і сподіваюся швидко. Не для мільйонних списків, але з невеликою кількістю даних, думаю, впорається. Ну і плюс для мене - наповнення можна перекласти на чужі плечі, бо це просто.

Продовження: Нехай css шукає або база даних у HTML 2