Structura indexului în solicitanții care procesează în client
dacă căutarea internă se bazează pe un indice de cuvânt care nu este Foarte extins, este posibil să trimiteți indicele clientului și acesta este browserul care efectuează procesul de căutare utilizând JavaScript și DOM Management. O soluție constă în crearea unui fișier de text plat cu indicele cuvintelor cheie, ceva asemănător cu ceea ce am văzut în subiectul anterior:
...table 86tbody 86,12...
astfel încât cuvintele cheie indică numere de documente unde sunt situate. La rândul său, putem avea un alt fișier index cu adresele URL:
...12 /ijk/lmn.html86 /abc/def/ghi.html...
Acest lucru poate fi trimis clientului folosind variabile de tip șir într-un fișier .js, pentru Exemplu:
var indice = "...;table=86;tbody=86,12;...";var claves = "...;12=/ijk/lmn.html;...;86=/abc/def/ghi.html;...";
apoi în browser am putea aplica funcția split() pentru a transforma aceste lanțuri în matricele corespunzătoare Și lucrați pe ele.
Dar când mi-am făcut motorul de căutare cu JavaScript, nu am folosit acest concept de indice cheie, dar am construit indicele exclusiv utilizând antetele identificate. Acesta este un exemplu al HTML al indicelui situat în <body> al documentului:
<div></div><div> ... <div class="item"> ... <div style="text-indent:3em"> <a href="/temas/xhtml-css/cabecera.html#h0" class="h0"> Elementos XHTML de cabecera </a> </div> ... </div> ...</div>
indexul este trimis în interiorul documentului, ca elemente HTML, situate în recipient cu id="indiceContenidos" care inițial are proprietățile stilului overflow: hidden; height: 0; cu ceea ce nu va face să fie afișate în ecran, dar conținutul său este prezent. Apoi, fiecare pagină este închisă într-un recipient ca id="cabecera", în cazul în care identificatorul este numele documentului fără extensie. Prin urmare, acest container va avea toate legăturile cu antetele documentului cabecera.html. Fiecare link <a> este, de asemenea, conținut într-un alt <div> pentru ao furniza elegant indentat.
în esență este vorba despre Încărcați o variabilă globală cu o colecție de elemente <a> al indicelui, acțiune care se face cu sarcina paginii. Apoi, utilizatorul atunci când vă căutați de această colecție prin eliminarea textului interior al elementului și verificarea meciului cu șirul de căutare. Avantajul trimiterii indexului la client ca elemente HTML este că acesta poate fi utilizat direct ca un indice de conținut sau mai degrabă, un cuprins, pentru care cu JavaScript schimbăm proprietățile de stil ale containerului cu id="indiceContenidos":
conten.style.overflow = "visible";conten.style.height = "auto";
Avantajul mare al acestor motoare de căutare cu JavaScript este că nu consumă resurse de servere atunci când procesează căutările. Totul se face în browser. Dar dimensiunea este o limitare care condiționează aceste motoare de căutare, deci pentru un volum mai mare de anteturi, nu ar mai fi eficientă să-l trimiteți browserului clientului. Această căutare include 862 de link-uri către toate titlurile celor 16 documente care alcătuiesc glosarul XHTML + CSS. Căutarea este apoi compusă din:
- document căutat.html de 152kb cu legăturile către anteturi.
- JavaScript căutări.js de 7kb pentru a gestiona procesul căutări.
- stil extern în partea fișierului XHTMLCSS-Style.Css. Acest lucru ocupă 5kb, dar despre motorul de căutare este o sumă mai mică.
în ceea ce urmează este expus ca acest motor de căutare funcționează. Dar începem de faptul că am construit deja indicele în funcție de structura indicată și că vom repeta schematic din nou:
<div> ... <div> ... <div><a>...</a></div> <div><a>...</a></div> ... </div> ... <div> ... <div><a>...</a></div> <div><a>...</a></div> ... </div> ... </div>
Pentru a construi acest indice automat Consultați instrumentul unui subiect următor care vorbește despre indicii de construcție. Este un utilitar care vă va permite să fabricați acest indice pe baza documentelor HTML selectate, salvând HTML generat într-un fișier text. Pe acea pagină este explicată cum să utilizați acest instrument.
structura HTML-CSS a motorului de căutare cu JavaScript
vizual motorul nostru de căutare are acest aspect:
Aceasta este o casetă de text pentru șirul de căutare, un buton pentru a porni căutarea, altul pentru a deschide opțiunile inferioare și a unui buton pentru a afișa index. Opțiunile de căutare vă permit să căutați bilete care conțin toate cuvintele sau doar un cuvânt. În plus, numai cuvintele complete pot fi, de asemenea, căutate și majuscule.
Nu este convenabil să afișezi modelul de căutare dacă acest motor de căutare va fi destinat unui site de uz general. Dar, ca aici, obiectivul este de a arăta toate detaliile posibile, este inclus modelul de căutare. Deci, chiar și utilizatorul interesat poate încerca alte modele.Din punct de vedere, trebuie să ne amintim că acest motor de căutare funcționează în browser-ul utilizatorului, astfel încât erorile de modelele nejustificate vor afecta numai browserul și nu serverul.
În cele din urmă există un limitator pentru numărul maxim de Rezultate, deoarece pentru anumite căutări ca versuri, de exemplu, numărul de rezultate poate fi foarte mare. Oricum, oricum, cea mai bună modalitate de a înțelege toate acestea este să o puneți în execuție.
Structura generală prin blocuri este după cum urmează:
<div class="vinculos"> ...Aquí van la cadena de búsqueda y botones...</div> <div > <div>OTRAS OPCIONES DE BÚSQUEDA:<br /> ...Aquí van las opciones... </div> <div> ...Aquí se ponen los resultados de la búsqueda... </div> <div> ...Aquí va el índice de vínculos... </div> </div>
Stilul CSS specific pentru acest document este:
divid id = „D99415D3A2”>
containerul cu id="resultados" este în principiu conținutul gol, pentru că Există dinamic rezultatele fiecărei căutări. Containerul cu class="vinculos" are această structură:
<div class="vinculos"> Cadena: <input type="text" value="" size="40" onblur="patronear()" /> <input type="button" value="Buscar" onclick="buscar()" /> Encontrados: <em>0</em> <input type="button" value="Opciones" onclick="opciones()" /> <input type="button" value="Índice" onclick="indiceContenidos()" /> <div>...</div></div>
caseta de text pentru șirul de căutare include un eveniment onblur În așa fel încât, atunci când părăsiți acel element, modelul de căutare este actualizat cu funcțiile patronear(), funcțiile care sunt incluse în căutările modulului. Js. Butonul Pentru a porni căutarea apelurile funcției buscar(). Celelalte funcții sunt opciones() E Afișarea casetei de opțiuni și indicele total de conținut, deoarece ambele containere sunt inițial ascunse, cum ar fi fost declarată în CSS. Indexul total de conținut cu id="indiceContenidos" este ascuns cu height:0 Trebuie să îl încărcate pe pagină deoarece vom face căutarea itarano Prin elementele <a>, deci chiar dacă acestea nu sunt afișate, acestea sunt prezente. Să vedem acum structura casetei de opțiuni:
<div> Conjuntivas:<input type="checkbox" /> Palabra completa:<input type="checkbox" /> Diferencia mayúsculas/minúsculas:<input type="checkbox" /> Patrón:<span class="monospace">/</span> <input type="text" value="" size="40" class="monospace" /> <span class="monospace">/</span> <input type="text" size="5" value="" class="monospace" /> <input type="button" value="Actualizar patrón" onclick="patronear()" /> Resultados máximos:<input type="text" value="100" size="5" />, número de búsquedas máximas:<input type="text" value="0" size="5" /> de un total de <span>0</span><br /> </div>
În cele din urmă, rezultatele containerului (cu id="resultados") vid Inițial și containerul index (cu id="indiceContenidos") Structura sa a fost deja expusă în secțiunea anterioară.
JavaScript pentru a opera motorul de căutare intern
Structura variabilelor și funcțiilor globale ale acestui modul JavaScript este după cum urmează:
- variabile globale
-
inputPatron: o referință la elementul<input type="text">pentru a stoca modelul. -
inputOpcionesFlags: o referință la elementul<input type="text">care stochează opțiunile sau steagurile modelului. -
vinculos: o variabilă care va conține colecția de elemente<a>al indicelui. -
hasta: un număr întreg care conține inițial numărul de elemente ale acelui indice. -
particulas: o variabilă de tip șir care conține o listă de particule (prepoziții, adverbe etc.) care vor fi șterse din șirul de căutare.
-
-
: Inițializați căutarea cu sarcina paginii. - : Pregătiți modelul de căutare.
-
function buscar(): căutare acel model. -
function opciones(): Afișați sau ascundeți opțiunile casetei. -
function indiceContenidos(): Afișați sau ascundeți Indexul conținutului
Nu voi expune codul complet al acestui JavaScript. Cu browsere precum Firefox puteți descărca acest cod ușor și consultați-l. Funcția de inițializare cu sarcina paginii este pur și simplu responsabilă pentru referința variabilelor globale și de completarea colectării matricei sau a legăturilor. Funcțiile care prezintă sau ascunde recipientele de opțiuni sau index nu au complexitate. Vom vedea numai funcțiile pentru a pregăti modelul și pentru a căuta.
Când ieșim din caseta de căutări rulează evenimentul onblur care apelează funcția patronear(), care este responsabil pentru prepararea modelului.
DIV id = „484B7632A7”>
modelul pe care îl pregătim are două câmpuri, una cu Expresie regulată care va fi salvată în <input type="text"> și că am avut referire la variabila globală inputPatron și pe celelalte steaguri sau modificatori Din expresia regulată pe care o stocăm în <input type="text"> și că ne referăm și în variabila globală inputOpcionesFlags. Aceste variabile vor fi apoi consultate în funcția buscar(). Modelul este construit prin scăparea caracterelor rezervate a expresiilor regulate și apoi eliminând particulele utilizate frecvent. Este variabila globală particulas care conține o listă separată de bara verticală de prepoziții, adverbe, articole și alte cuvinte de frecvent utilizate în limba și că nu contribuie nimic la căutare .Eliminăm spațiile de la începutul sau la sfârșitul șirului de căutare și convertesc mai multe spații într-una. Dacă în cele din urmă lanțul conține ceva mai mult decât un spațiu, am construit modelul.
În acest moment vom avea un șir de căutare cu cuvinte separate de spațiu. Dacă este dezactivat <input type="checkbox" /> este că vom căuta câteva dintre aceste cuvinte. Construim modelul care separă alternativele cu bara verticală (o dilemă). Într-un alt caz, căutăm toate cuvintele și este construit prin separarea lor cu .*? echivalent cu o conjunctivă. Apoi, încorporăm delimitatoarele \b pentru întregul cuvânt. În caseta Flags, adăugăm opțiunea Dacă căutarea este insensibilă cu majuscule, adică, nu diferă cu litere mici.
când părăsesc Am avut deja în cutie <input type="text"> modelul și în <input type="text"> steagurile Când este apăsat butonul corespunzător, executăm buscar():
function buscar() { document.getElementById("encontrados").innerHTML = 0; var divResultados = document.getElementById("resultados"); divResultados.innerHTML = ""; var cadBusca = inputPatron.value; var opciones = inputOpcionesFlags.value; var maxBusca = 1 * document.getElementById("maxBusca").value; var maxResulta = 1 * document.getElementById("maxResulta").value; var maxResultaBase = maxResulta; var item = 0; if (cadBusca != "") { var patron = new RegExp(cadBusca, opciones); document.getElementById("iterTotal").innerHTML = hasta; if (maxBusca < hasta) { hasta = maxBusca; } for (var i=0; i<hasta; i++) { var cadena = getInnerText(vinculos); var resultado = cadena.match(patron) ; if (resultado != null) { item++; if (item <= maxResulta) { divResultados.innerHTML += ' <a href="' + vinculos.href + '">' + vinculos.innerHTML + '</a><br />'; } else { var men = ""; if (maxResulta == maxResultaBase) { men = " primeros "; } else { men = " siguientes "; } document.getElementById("encontrados").innerHTML = item; var mensaje = window.confirm("Se muestran los" + men + maxResultaBase + " resultados. ¿Continuar buscando?"); if (mensaje) { maxResulta += maxResultaBase; } else { break; } } } } } document.getElementById("encontrados").innerHTML = item;}
Variabila maxBusca limitează numărul maxim de iterații din colecția de legături. Variabila maxResulta Controlează numărul de rezultate care urmează să fie returnate. Apoi declarăm expresia regulată cu new RegExp(cadBusca, opciones). În acest caz, folosim un șir în cadBusca, modelul construit înainte cu funcția patronear(), adăugând steagurile. Procesul de căutare constă din iterate prin colectarea de legături prin extragerea textului interior al elementelor <a>. O facem cu funcția getInnerText() al modulului general.js cu funcții care unifică comportamentul browserelor atunci când extrage textul interior al unui element. Pentru aceasta este necesar să se conecteze acest modul la antetul căutărilor:
dacă nu doriți să includeți modulul general.js puteți localiza Funcția getInnerText() direct în modulul căutat. Pe acel text interior al elementului <a> . Noi controlăm că numărul de rezultate este mai mic decât cei declarați în prezent (variabil maxResulta), caz în care acumulăm cu innerHTML dinamic Construiți elemente de legătură. Dacă depășiți maxResulta, cerem utilizatorului dacă vom continua să-i dându-i opțiunea de a sparge bucla.
Multe îmbunătățiri sunt posibile, dar în esență am arătat a mod de a face un motor de căutare intern cu JavaScript. Marele avantaj este că rulează în browser-ul utilizatorului, unde întoarcerea de întoarcere este mai rapidă și, de asemenea, nu consumă resurse de servere. Dezavantajele sunt în principal nevoia ca utilizatorul să aibă activată JavaScript și dimensiunea fișierului index care trebuie transferat de pe server. Acest aspect poate fi îmbunătățit dacă în loc să faceți un index HTML, am făcut-o cu un text numai, dar totuși acest motor de căutare va fi întotdeauna limitat de o dimensiune maximă a fișierului index. Nu pare corect să trimită client un document, inclusiv fișierul index cu dimensiunea care depășește prea mult 150kb prea mult.
În acest moment am implementat pe acest site un alt motor de căutare bazat pe indexuri stocate ca o matrice serializate În fișierele text și rularea pe serverul expuse în subiectul următor. Dar totuși păstrez acest motor de căutare cu JavaScript, deoarece, indiferent de calitatea sa, este un exercițiu bun de a învăța aspecte ale JavaScript ca management DOM sau expresii regulate.