Передісторія
Власне мене давно просять зробити пошук для сайту. Там звичайно дуже мало чого шукати, але як зачепив на найближче майбутнє. У планах додавання нових одиниць для пошуку. Цей туманний і не вивчений мною альбіон 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