HTML database

Prehistory

Actually I have been asked to do a search for the site. There is of course very little to look for, but as a reserve for the near future. Plans to add new units to search. This foggy and not studied by me albion SQL scared away its mysteriousness. But not in the same files to store data. Stop, why not? Search to produce using javascript. I thought that it was possible to load search data into the script, etc. I was infected with this idea, and when I started writing, I thought: “Why complicate things like that? Let everything be on the page, and the items are not suitable for the characteristics will just hide. " At the same time, the search engines page is visible with all the results. All data is available to the user at once, and it remains only to choose independently from the server. The page can be squeezed and put in the cache forever.


')

Story

HTML

Created a new HTML file and started his experiments. Added select:

< select id = "style" onchange = "filter_changed ()" >
< option value = "" > Style: < / option >
< option > neoclassicism < / option >
< option > postmodern < / option >
< option > pseudo-modern < / option >
< option > neogothic < / option >
< / select >

Added a data 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">
"Rust"
< / a >
< / div >
< div class = "style" > neoclassicism < / div >
< div class = "wall_material" > ceramic brick insulated with mineral wool < / div >
< div class = "square" > 165.5 < / div >
< div class = "living_space" > 86 < / div >
< div class = "floors" > 2 < / div >
< / div >

Choose what to eat. What is there too. Now it remains to do what.

Javascript

Created a js file.

And so the first thing we need to do is to process all the items. It's simple:

function filter_changed ( ) {
var list = document. getElementsByClassName ( "home" ) ;
for ( var i = 0 ; i < list. length ; i ++ )
hide ( list [ i ] , is_filtred ( list [ i ] ) ) ;
}

Now it is necessary to determine whether this item is suitable for the given characteristics.

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 ;
}

If we do not find a given characteristic, then the element is hidden.

function hide ( node , h ) {
node. style . display = h ? "none" : "block" ;
}

So. Deal with it. But there are still values ​​that you can’t specify in the list. We make a filter for them.

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 ;
}
}

Well, almost everything. Oh yes. What kind of get this?

function get ( node , keys ) {
for ( var i = 0 ; ( i < keys. length ) && node ; i ++ )
node = node [ keys [ i ] ] ;
return node
}

It prevents an error if suddenly an element or its property is not found.

CSS

Since in HTML we have bare data, and we need to give the user an understanding of what he is looking at, we add such lines to CSS.

.name :: before {
content : "Title:" ;
color : gray ;
}
.style :: before {
content : "Style:" ;
color : gray ;
}
.wall_material :: before {
content : "Wall Material:" ;
color : gray ;
}

.square :: before {
content : "Total area:" ;
color : gray ;
}
.square :: after , .living_space :: after {
content : "sq. m." ;
color : gray ;
}
.floors :: before {
content : "Floors:" ;
color : gray ;
}
.living_space :: before {
content : "Living space:" ;
color : gray ;
}

Since this data is secondary, we let the really meaningful content come to the fore by setting a gray color for this text.

Conclusion

Just hopefully fast. Not for millions of lists, but I think it will cope with a small amount of data. Well, plus for me - the content can be shifted onto other shoulders, for it is simple.

Continued: Let css search or database in HTML 2