HTML डेटाबेस

प्रागितिहास

दरअसल, मुझे लंबे समय से साइट की खोज करने के लिए कहा गया है। वहाँ, ज़ाहिर है, देखने के लिए बहुत कम है, लेकिन निकट भविष्य के लिए कैसे चोट लगी है। खोज के लिए नई इकाइयों को जोड़ने की योजना। यह धूमिल और मेरे द्वारा अध्ययन नहीं किया गया अल्बियन एसक्यूएल अपने रहस्य से डर गया। लेकिन यह डेटा स्टोर करने के लिए फाइलों में नहीं है। रुकिए, क्यों नहीं? जावास्क्रिप्ट का उपयोग कर उत्पादन करने के लिए खोजें। मुझे लगा कि स्क्रिप्ट आदि में खोज के लिए डेटा लोड करना संभव है। इस विचार ने मुझे प्रभावित किया, और जब मैंने लिखना शुरू किया, तो मैंने सोचा: "यह क्यों जटिल है? सब कुछ पृष्ठ पर होने दें, और आइटम जो विशेषताओं को फिट नहीं करते हैं उन्हें बस छिपाया जाएगा। ” इसी समय, खोज इंजन के लिए पृष्ठ सभी परिणामों के साथ दिखाई देता है। सभी डेटा उपयोगकर्ता के लिए एक ही बार में उपलब्ध है, और यह केवल सर्वर से स्वायत्तता का चयन करने के लिए बना हुआ है। आप पृष्ठ को संपीड़ित कर सकते हैं और इसे हमेशा के लिए कैश में डाल सकते हैं।

कहानी

एचटीएमएल

एक नई HTML फ़ाइल बनाई और अपने प्रयोग शुरू किए। जोड़ा गया चयन:

< select id = "style " onchange = "filter_changed ()" >
< विकल्प मूल्य = "" > शैली: < / विकल्प >
< विकल्प > नियोक्लासिकिज्म < / / विकल्प >
< विकल्प > उत्तर आधुनिक < / विकल्प >
< विकल्प > छद्म-आधुनिक < / विकल्प >
< विकल्प > नव-गॉथिक < / / विकल्प >
< / 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" > neoclassicism < / div >
< div class = "wall_material" > सिरेमिक ऊन खनिज ऊन के साथ अछूता < / div >
< div class = "square" > 165.5 < / div >
< div class = "Living_space" > 86 < / div >
< div class = "फर्श" > 2 < / div >
< / div >

जो है उसे चुनें। जिसमें से भी है। अब यह करना बाकी है।

जावास्क्रिप्ट

जेएस फाइल बनाई।

और इसलिए पहली चीज जो हमें करने की जरूरत है वह है सभी बिंदुओं को संसाधित करना। यह सरल है:

फ़ंक्शन फ़िल्टर_चेंज ( ) {
var सूची = दस्तावेज। getElementsByClassName ( "घर" ) ;
के लिए ( var i = 0 ; मैं < सूची ; लंबाई ; i ++ )
छिपाना ( सूची [ i ] , is_filtred ( सूची [ i ] ) ) ;
}

अब हमें यह निर्धारित करने की आवश्यकता है कि क्या यह आइटम दी गई विशेषताओं के लिए उपयुक्त है।

फ़ंक्शन is_filtred ( नोड ) {
अगर ( no_text ( नोड , "स्टाइल" ) ) सही है ;
}

फ़ंक्शन no_text ( नोड , फ़िल्टर ) {
var style_filter = get ( दस्तावेज़। getElementById ( फ़िल्टर ) , [ "मूल्य" ] ) ;
var home_style = get ( नोड। getElementsByClassName ( फ़िल्टर ) , [ 0 , "textContent" ] ) ;
if ( style_filter && ( ?! home_style) ( home_style। indexOf ( style_filter ) < 0 ) )
सच लौटना ;
}

यदि हमें दी गई विशेषता नहीं मिलती है, तो तत्व छिपा हुआ है।

समारोह छिपाने ( नोड , एच ) {
नोड। शैली । प्रदर्शन = ज ? "कोई नहीं" : "ब्लॉक" ;
}

So. इससे निपटा गया। लेकिन अभी भी मात्राएँ हैं जो आप सूची से नहीं पूछ सकते हैं। हम उनके लिए एक फिल्टर बनाते हैं।

फ़ंक्शन is_filtred ( नोड ) {
अगर ( no_text ( नोड , "स्टाइल" ) ) सही है ;
अगर ( तुलना ( नोड , "वर्ग" ) ) सच लौटें ;
}

फ़ंक्शन तुलना ( नोड , फ़िल्टर , तुलना ) {
var square_filter = get ( दस्तावेज़। getElementById ( फ़िल्टर ) , [ "मूल्य" ] ) ;
var home_square = get ( नोड। getElementsByClassName ( फ़िल्टर ) , [ 0 , "textContent" ] ) ;
यदि ( वर्ग_फिल्टर && ! home_square )
सच लौटना ;
अगर ( वर्ग_फिल्टर && home_square ) {
square_filter = parseFloat ( वर्ग_फिल्टर )
home_square = parseFloat ( home_square )
if ( ( तुलनाकारक ; तुलनाकर्ता == ">" ) ? वर्ग_फिल्टर > home_square : तुलनाकर्ता == "<"; वर्ग_फिल्टर < home_square : तुलनाकर्ता == "=" " - वर्ग_फिल्टर ! = home_square : false )
सच लौटना ;
}
}

खैर, यह सब है। अरे हाँ। यह किस तरह का मिलता है?

फ़ंक्शन मिलता है ( नोड , कुंजियाँ ) {
के लिए ( var i = 0 ; ( i < कुंजियां। लंबाई ) && नोड ; i ++ )
नोड = नोड [ चाबियाँ [ i ] ] ;
वापसी नोड
}

यह एक त्रुटि को रोकता है यदि कोई तत्व या उसकी संपत्ति नहीं मिली है।

सीएसएस

चूंकि हमारे पास HTML में नंगे डेटा हैं, और हमें उपयोगकर्ता को यह समझने की आवश्यकता है कि वह क्या देख रहा है, हम सीएसएस में ऐसी लाइनें जोड़ते हैं।

.name :: पहले {
सामग्री : "शीर्षक:" ;
रंग : ग्रे ;
}
.style :: { से पहले।
सामग्री : "स्टाइल:" ;
रंग : ग्रे ;
}
.wall_material :: से पहले
सामग्री : "दीवार सामग्री:" ;
रंग : ग्रे ;
}

.square :: इससे पहले। "
सामग्री : "कुल क्षेत्र:" ;
रंग : ग्रे ;
}
.square :: के बाद , .living_space :: के बाद {
सामग्री : "वर्गमीटर" ;
रंग : ग्रे ;
}
.floors :: से पहले।
सामग्री : "फर्श:" ;
रंग : ग्रे ;
}
.living_space :: से पहले {
सामग्री : "रहने का क्षेत्र:" ;
रंग : ग्रे ;
}

चूँकि यह डेटा गौण है, इसलिए हम इस पाठ ग्रे को सेट करके वास्तव में सार्थक सामग्री को सामने आने देते हैं।

निष्कर्ष

सरल और उम्मीद से तेज। लाखों सूचियों के लिए नहीं, लेकिन डेटा की एक छोटी राशि के साथ, मुझे लगता है, इसे संभाल सकते हैं। खैर, मेरे लिए प्लस - सामग्री दूसरों के कंधों पर स्थानांतरित की जा सकती है, क्योंकि यह सरल है।

जारी: HTML 2 में css सर्च या डेटाबेस को जाने दें