Javascript дээр скрипт хайлтын хуудас. jQuery ашиглан хуудаснаас хайх. Татаж авах хайлтын талбар

Би саяхан jQuery ашиглан хуудас хайлт хийсэн. Хуудас дээрх контентыг үзэхэд оновчтой байхын тулд үүнийг хэрхэн яаж хийхийг бодож байхдаа би хайлтын 2 сонголттой болсон. Үүний үр дүнд хоёр дахь сонголт нь миний хэрэгцээнд илүү тохирсон байсан ч өнөөдөр би хоёулангийнх нь талаар танд хэлэх болно.

Эхний хувилбарт хайлтыг баримт бичгийн өгөгдсөн хэсэгт байгаа бүх үг (тэмдэг) ашиглан гүйцэтгэнэ. Хоёрдахь хувилбарт үгсийн жагсаалтыг эхлээд зааж өгсөн бөгөөд хайлтын талбарт тэмдэгт оруулах үед тэдгээрийг агуулсан үгсийг санал болгох болно. Нэг төрлийн хайлтын зөвлөгөө.

1-р сонголт

Бид jQuery номын сан, текст дэх тохирох утгыг хайх, тодруулах үүрэгтэй тодотгох залгаас, хайлтын асуулга боловсруулах скриптийг холбодог. Элемент дээр дарахад скрипт ажиллана id = "илгээх".

$(баримт бичиг).бэлэн(функц())( $("#submit").товших(функц())( var term = ""; var n = "0"; $("бие").removeHighlight() ; $ ("p.results").hide().empty(); нэр томъёо = $("#term").attr("утга"); if($("#term").val() == "" )( $("p.results").fadeIn().append("Дээрх талбарт хайлтын асуулгыг оруулна уу"); буцаах false; )else( $(".main"). тодотгох(нэр томъёо); n = $( "span.highlight").length; if(n == 0)( $("p.results").fadeIn().append("Одоогүй"); )else( $("p.results" ).fadeIn().append("Олдсон: "+n+" таарч байна."); ) худал буцаана; ) )); ));

хувьсагч хугацаа- хайлтын асуулгын утгыг авдаг;
хувьсагч n- олдсон тоглолтын тоог хариуцах;
функц Highlight() арилгах- өмнөх хайлтын үр дүнг устгах;
функц нуух()- хайлтын үр дүнгийн талаархи мэдээлэл бүхий блокыг нуух;
функц хоосон()— хайлтын үр дүнгийн блокийн агуулгыг устгах;
функц д алга()— хайлтын үр дүнгийн талаарх мэдээлэл бүхий блокийг харагдуулах;
функц нэмэх()- хайлтын үр дүнгийн талаархи мэдээлэл бүхий контентыг блок руу нэмнэ;
функц тодруулах()— хайлтын асуулгад тохирох бүх үгийг анги = “тодруул” гэсэн span шошгонд жаазлах;
өмч урт- хуудаснаас олдсон тохирох тоог буцаана.

Шошго хооронд биета хайлтын асуулга оруулах маягт, хайлтын үр дүнгийн талаарх мэдээллийг харуулах контейнер, анги бүхий блок оруулах хэрэгтэй. голтүүний дотор хайлт хийх болно.

Агуулга

2-р сонголт

Бид загвар бүхий файл, jQuery UI: Автоматаар гүйцээх виджет, jQuery номын сан, текст дэх тохирох утгыг хайх, тодруулах үүрэгтэй тодотгох залгаас, хайлтын асуулга боловсруулах скрипт зэргийг багтаасан болно.

$(function() ( var availableTags = [ "ActionScript", "BASIC", "C++", "Delphi", "Java", "JavaScript", "Pascal", "PHP", "Python", "Ruby", "Visual Fortran" ]; $("#tags").autocomplete(( эх сурвалж: availableTags )); )); $(баримт бичиг).бэлэн(функц())( $("#submit"). дарж(функц())( var term = "#"; var tags = ""; $("body").removeHighlight() ; хэрэв ($("#tags").val() != "") (хэр томъёо += $("#tags").val(); хаягууд = $("#tags").attr("утга" ); ) $("h3").тодорхойлох(шошго); байршил.href = term.toLowerCase(); )); ));

хувьсагч хугацаа– хавчуурга руу холбоос үүсгэх үүрэгтэй, # тэмдгээр эхэлж, дараа нь хавчуургын нэр (хайлтын хайлтын утга) ирнэ;
хувьсагч шошго- хайлтын асуулгын утгыг авдаг;
функц toLowerCase()— мөрийг жижиг үсэг рүү хөрвүүлдэг;

Энэ тохиолдолд хайлтыг зөвхөн массивын элементүүдээр гүйцэтгэнэ боломжтой шошго h3 шошго дотор. Скрипт нь хавчуурга руу холбоос үүсгэдэг бөгөөд хайлтын товчийг дарсны дараа заасан id бүхий шошго руу очно.

jQuery ашиглан хуудас хайх: болон .

Энэ бол бүх зүйл, хэрэв хэн нэгэн скрипт хэрхэн ажилладаг талаар асуух зүйл байвал сэтгэгдэл дээр асууж болно. Би хариулахыг хичээх болно.

Хэрэв та талбарт "асуулт" гэж бичээд "Find" товчийг дарвал хуудасны хаяг "http://site/2011/06/forma-poiska-po-saitu..html?text=question"-ээс өөрчлөгдөнө. , учир нь энэ нь таныг холбоос дээр дарахад тохиолддог. Хуудсыг ачаалах үед скрипт нь URL-д заасан параметрүүд байгаа эсэхийг шалгаж, илрүүлсэн тохиолдолд тухайн сайтын хайлтын үр дүнг үүсгэж, харуулна.

Гэхдээ баримт бичгийг ачаалах хурдыг нэмэгдүүлэхийн тулд хүсэлтийг боловсруулах скриптийг ихэвчлэн сайтын зөвхөн нэг хуудсанд байрлуулдаг бөгөөд хэрэв хаягийг нь үйлдлийн шинж чанарт заасан бол шилжилт хийх болно: " http:// сайт/хайлт/ ?текст=асуулт "

Скрипт ажиллахын тулд -д заасан нэмэлт параметрүүд шаардлагатай байж болно. Энэ талбар харагдахгүй байна.?searchid=808327 &text=question".

Та ашиглаж болно

• Yandex болон Google-ийн тусгай үйлчилгээнүүдийн санал болгож буй,
• ашигласан CMS-д суурилуулсан (хэрэв байгаа бол), жишээлбэл, "https://site.ru/search?q=vopros" дээрх Blogger дээрх "site.ru" нь таны блог хаягаар солигдсон,
• жишээлбэл, PHP дээр бие даан боловсруулсан.

Хамгийн хялбар сонголт бол хүсэлтийг Google рүү дахин чиглүүлэх явдал юм:>

Сайн байцгаана уу, LifeExample блогын эрхэм уншигчид аа, бид бүгд CTRL+F эсвэл F3 товчийг ашиглан вэб хөтчийнхөө цахим хуудас хайлтыг ашигладаг. Хуудасны бүх агуулгыг бие даан унших цаг байдаггүй тул бид ийм давуу эрхээс зугтаж чадахгүй байх шиг байна. Асуудал нь бүх шинэхэн хэрэглэгчид ямар ч хөтчийн ийм далд чадамжийн талаар мэддэггүй, гэхдээ үүнгүйгээр хийх боломжгүй төслүүдэд гар хийцийн JavaScript хуудасны хайлтыг суулгаснаар тэдэнд тусалж болно.

Хүснэгт, жагсаалт зэрэг их хэмжээний өгөгдөл агуулсан хуудсуудад хуудас хайх шаардлагатай байж болно. Хуудасны агуулга нь статик, мэдээллийн сангаас үүсгэгдээгүй үед ийм хэрэгцээ үүсдэг гэдгийг би тэмдэглэж байна.

Хэрэв та тохирох интерфейсийг хэрэгжүүлбэл хуудаснаас шаардлагатай мэдээллийг хайх нь илүү тохиромжтой байх болно.

Талбарт та хайлтын үгээ оруулаад "Хайх" товчийг дарах хэрэгтэй, энд бүх зүйл ойлгомжтой болно. Хуудасны хайлтын механизмын хэрэгжилт рүү шилжиж, үүнийг хэрэгжүүлэхэд ямар нюансууд байж болохыг харцгаая.

Хуудас дээрх үгийг хэрхэн хайх вэ?
Бид оруулсан өгөгдлийн үнэн зөвийг шалгах хэрэгтэй; бидний тохиолдолд бид зөвхөн хайлтын хэллэгийн хажуу тал дахь хоосон зайны тэмдэгтүүдийг таслахаас гадна маягтыг өөрөө хайлтын асуулга байгаа эсэхийг шалгах болно.
Өгөгдөл нь статик бөгөөд зөвхөн хуудасны DOM-д хадгалагддаг тул хайлтыг DOM (Баримт бичгийн объектын загвар) агуулгын дагуу нарийн хийх болно.
Хамгийн гол нь бидний JavaScript хайлтаар олсон бүх үр дүнг хэрэглэгчдэд харуулах явдал юм. Тэдгээр. хуудасны агуулгын олдсон хэсгүүдийн доорх дэвсгэрийг тодруулна уу.
Энэхүү мини хуудасны хайлтын модуль нь зөвхөн гүйлгэх боломжтой том хуудсуудтай холбогдоход тохиромжтой байдаг тул хэрэв хаа нэгтээ харагдахгүй газар олдсон хэллэг байвал олсон элемент рүү гүйлгэх нь зүйтэй.
Хайлтыг дахин ашиглах нь энэ скриптийг ажиллуулах чухал цэг юм. Учир нь олсон хэсгүүдийг тодруулах нь DOM объектын агуулгыг өөрчилсний үр дүн юм, дараа нь дараагийн хайлтын мөчлөг бүр нь өмнөх үр дүнг дарж бичиж, шинэ давталтанд нэмэлт өөрчлөлт оруулахын тулд хуудасны агуулгыг анхны хэлбэрт нь буцаана.
Товчхондоо энэ бүх юм шиг санагдаж байна. Тодруулсан цэгүүдийн эзэлхүүнийг үл харгалзан тэдгээрийг хэрэгжүүлэх нь кодонд их цаг хугацаа, зай шаарддаггүй; энд JavaScript хуудасны хайлтын механизмд зориулсан бэлэн скрипт байна.

var lastResFind=""; // сүүлчийн амжилттай үр дүн
var copy_page=""; // хуудасны эх хэлбэрээр хуулбарлах
функц TrimStr(s) (
s = s.replace(/^s+/g, "");
буцах s.replace(/s+$/g, "");
}
функц FindOnPage(inputId) (//хуудсаас текст хайх, оролтын талбарын ID нь параметрт шилждэг.
var obj = window.document.getElementById(inputId);
var textToFind;

Хэрэв (obj) (
textToFind = TrimStr(obj.value);//зай таслах
) өөр (
alert("Оруулсан хэллэг олдсонгүй");
буцаах;
}
хэрэв (textToFind == "") (
alert("Та юу ч оруулаагүй байна");
буцаах;
}

Хэрэв(document.body.innerHTML.indexOf(textToFind)=="-1")
alert("Юу ч олдсонгүй, оруулсан зүйлээ шалгана уу!");

Хэрэв(хуулбар_хуудас.урт>0)
document.body.innerHTML=copy_page;
else copy_page=document.body.innerHTML;

Document.body.innerHTML = document.body.innerHTML.replace(eval("/name="+lastResFind+"/gi")," ");//өмнөх гүйлгэх зангууг арилгах
document.body.innerHTML = document.body.innerHTML.replace(eval("/"+textToFind+"/gi")," "+textToFind+""); // Олдсон текстийг зангуу холбоосоор солих;
lastResFind=textToFind; // хайлтын хэллэгийг хадгалснаар ирээдүйд бид үүнийг ашиглан бүх холбоосыг устгах боломжтой болно
window.location = "#"+textToFind;//хамгийн сүүлд олдсон тохирох зүйл рүү гүйлгэ
}


JavaScript хуудас хайх



Хайх үг эсвэл хэллэг оруулна уу.

Скриптийг ашиглах жишээ ийм байна:

Кодын тайлбарын хувьд скрипт дотор байгаа тул энд шаардлагагүй байж магадгүй юм. Эхлэгчдэд хэцүү байж болох цорын ганц зүйл бол орон зайг багасгахдаа тогтмол хэллэгийн утгыг ойлгох явдал юм. Тусламж хэрэгтэй хэн бүхэнд би байнгын хэллэгийн талаархи нийтлэлийг уншихыг зөвлөж байна.

Энэ нийтлэлд JavaScript хэлээр хэрэгжсэн хуудас хайлт нь Internet Explorer зэрэг бүх хөтөч дээр хүчинтэй.

Вэб хуудасны хайлтын талбар нь вэб хуудасны хэрэглэгчийн интерфэйсийн хамгийн чухал элементүүдийн нэг юм. Түүний тусламжтайгаар хэрэглэгч таны сайтаас хүссэн контентоо олох боломжтой.

Энэ зааварт та HTML5 ашиглан хайлтын талбарын тэмдэглэгээг хэрхэн үүсгэх, мөн CSS3-ийн хүчийг ашиглан скрипт ашиглахгүйгээр маягтын элементүүдийг хэрхэн загварчлах талаар сурах болно.

Элемент нь хайлтын маягтын контейнер бөгөөд хайлтын талбар нь эсвэл элементийг ашиглан үүсгэгддэг бөгөөд серверт өгөгдөл илгээх товчлуурыг эсвэл элемент ашиглан үүсгэж болно.

Энэ нь юугаараа ялгаатай вэ? Эдгээр талбаруудын аль аль нь текст оруулах нэг мөр бүхий текст талбарыг үүсгэдэг боловч type="search" нь HTML5 стандартад нэмэгдсэн бөгөөд хөтчүүдэд зориулсан семантик зөвлөгөө юм. Mozilla Firefox-оос бусад бүх хөтчүүд талбарт клирингийн загалмай нэмдэг. Үүнийг арилгахын тулд талбарын төрлийг type="text" болгон өөрчилж болно.

Энэ нь юугаараа ялгаатай вэ? Эхний эсвэл хоёр дахь аргыг ашиглан үүсгэсэн илгээх товчлууруудын үйлдэлд ялгаа байхгүй. Ялгаа нь энэ элемент нь сав тул дотор нь зураг, дүрс зэрэг бусад элементүүдийг байрлуулж болно.

Та хоёр аргаар маягтын талбарт текст нэмж болно:
1)
Үзүүлсэн текстийн өнгө нь саарал өнгөтэй болно. Дараах дүрмийг ашигласнаар та самбарын текстийг дурын өнгөөр ​​тохируулах, талбарын хэв маяг, дэвсгэрийг өөрчлөх боломжтой. Эдгээр сонгогчийг нэг дүрэмд нэгтгэх боломжгүй, эс тэгвээс тэдгээр нь ажиллахгүй.

Input::-webkit-input-placeholder (өнгө: #B6C0A5; үсгийн хэв маяг: налуу; дэвсгэр: #E0EFCA; ) оролт:-moz-placeholder (өнгө: #B6C0A5; үсгийн маяг: налуу; дэвсгэр: #E0EFCA; ) оролт:-ms-input-орлуулагч (өнгө: #B6C0A5; үсгийн хэв маяг: налуу; дэвсгэр: #E0EFCA; )

2)
Үзүүлсэн текстийн өнгө нь хар өнгөтэй болно. Та өнгөний шинж чанарыг ашиглан өнгөө тохируулж болно, жишээлбэл:

Оруулга (өнгө: цагаан; )

Дүрсүүдийг харуулахын тулд холбогдохоо бүү мартаарай.

Дүрс бүхий товчлуур дээр дарахад хайлтын талбар гарч ирнэ.

* (хайрцагны хэмжээ: хилийн хайрцаг;) хэлбэр (байрлал: харьцангуй; өргөн: 300 пиксел; захын зай: 0 автомат; өндөр: 42 пиксел; ) оролт (өндөр: 42 пиксел; өргөн: 0; дэвсгэр: 0 42px 0 15px; хүрээ: аль нь ч биш; хүрээ-доод: 2px хатуу тунгалаг; тойм: байхгүй; дэвсгэр: ил тод; шилжилт: .4s куб-безиер(0, 0.8, 0, 1); байрлал: үнэмлэхүй; дээд: 0; баруун: 0; z-индекс : 2; ) оролт: фокус (өргөн: 300px; z-индекс: 1; хүрээ-доод: 2px хатуу #F9F0DA; ) товч (арын дэвсгэр: #683B4D; хүрээ: байхгүй; өндөр: 42px; өргөн: 42px; байрлал: үнэмлэхүй ; дээд: 0; баруун: 0; курсор: заагч; ) товчлуур: өмнө ( контент: "\f002"; фонт-гэр бүл: FontAwesome; үсгийн хэмжээ: 16px; өнгө: #F9F0DA; )

Шинэчилсэн хариулт:

Та өөрийн удирддаггүй вэб хуудас руу залгаж, дараа нь хөтөч дээрээ JavaScript ашиглан түүнтэй харилцахыг хүсч байгааг би эхэндээ ойлгосонгүй.

Доорх анхны хариултын мэдээлэл нь хамааралтай хэвээр байгаа боловч асуулт нь: кодыг зөв контекст дээр хэрхэн ажиллуулах вэ? Хариулт нь: Дор хаяж хоёр арга бий:

Өнөө үед ямар ч сайн хөтөч нь дибаг хийх хэрэгслүүдтэй. Тэдгээрийн цэсийг хараарай, гэхдээ олон хөтчүүдэд F12 товчлуур эсвэл Ctrl + Shift + I-ээр хандах боломжтой. Эдгээр хэрэгслүүдээс та JavaScript-г оруулаад хуудасны контекст дээр ажиллуулах "консол"-ыг олох болно. чи харж байна.

Энэ нь аливаа зүйлийг интерактив байдлаар хийхэд маш сайн, гэхдээ тэр болгонд давтах нь бага зэрэг зовдог. Та мөн кодыг локал файлд (жишээ нь /home/tjc/foo.js) байрлуулж, дараа нь хуудас руу очихдоо консолыг ашиглан тухайн скриптийг хуудсанд нэмэх боломжтой (энэ нь тухайн хуудсанд ажиллахад хүргэдэг. хуудасны контекст). Жишээ нь:

Document.documentElement.appendChild(document.createElement("скрипт")).src = "file:///home/tjc/foo.js";

Таны скрипт хүссэн зүйлээ хийсний дараа та үүнийг хавчуурга болгож болно. Энэ бол ердийн http: гэхээсээ илүү javascript: scheme ашигладаг хөтчийн хавчуурга юм. Дэлгэрэнгүйг холбоосоор орж үзнэ үү. Танд JavaScript кодыг авч, шаардлагатай URL кодчилол хийх хэрэгсэл хэрэгтэй болно, жишээ нь Bookmarklet Crunchinator эсвэл үүнтэй төстэй.

Жинхэнэ хариулт:

Тиймээс энэ нь текстийг олох эсвэл элементийг id/class-аар авах болно ...

Эдгээр нь огт өөр гурван асуулт юм:

Хуудас дээрх текстийг олохын тулд танд хэд хэдэн сонголт байна:

• Хэрэв та зөвхөн текстийг олохыг хүсч байгаа ч аль элемент агуулах нь хамаагүй бол document.body дээрх innerHTML-г харж болно. innerHTML - мөр; Таныг хандах үед хөтөч нь таны дуудаж буй элемент дэх (мөн түүний үр удамд) бүх DOM элементүүдэд HTML стринг үүсгэдэг. Энэ нь серверийн эх контент биш гэдгийг анхаарна уу; Энэ нь тухайн элементэд хандах үед шууд үүсдэг. Ашиглалтын олон тохиолдлын хувьд энэ мөрийг аваад дараа нь үүнийг харах нь ашигтай байж болно. Таны үзэж буй текст нь тэмдэглэгээ гэдгийг анхаарна уу, жишээлбэл, хэрэв та "ширээ" гэсэн үгийг хайсан бол өгүүлбэрээс ("Бид ширээнд суулаа") эсвэл тэмдэглэгээнээс (

  ...).

  InnerHTML ашиглан хуудсан дээрх би гэдэг үгийг тоолох жишээ энд байна: шууд хуулбар

  (function() ( var pageText = document.body.innerHTML; display("I\"m"-ийн хуудас дээрх тоо: " + pageText.match(/I"m/g).length); функцийн дэлгэц(месг) ) ( var p = document.createElement("p"); p.innerHTML = String(msg); document.body.appendChild(p); ) ))();

  Хэрэв та яг аль элементэд байгааг олж мэдэх шаардлагатай бол хуудасны зангилаануудаар дамжих рекурсив функцийг бичих ба Text-ийн хувьд доторх текстийг харна. Энд үндсэн жишээ байна (функц нь алхах функц): Live Copy | - төгсгөлд байгаа жишээнүүдийн тэмдэглэлийг үзнэ үү.

  (функц() ( var matches = , index; walk( matches, document.body, ""); function walk( matches, node, path) ( var child; switch (node.nodeType) ( case 1: // Элемент (хүүхэд = node.firstChild; хүүхэд; хүүхэд = хүүхэд.nextSibling) ( алхах(тоглолт, хүүхэд, зам + "/" + node.tagName); ) завсарлага; тохиолдол 3: // Хэрэв текст (node.nodeValue.indexOf() "I"m") !== -1) ( matches.push("Үүнийг " + зам дээр олсон); ) завсарлага; ) ) display("Тохирол олдсон (" + matches.length + "):"); for (индекс = 0; индекс< matches.length; ++index) { display(matches); } function display(msg) { var p = document.createElement("p"); p.innerHTML = String(msg); document.body.appendChild(p); } })();

  Хуудасны id дээрх элементийг олохын тулд

  • гэр
  • Гар
  • Javascript дээр скрипт хайлтын хуудас. jQuery ашиглан хуудаснаас хайх. Татаж авах хайлтын талбар
  Холбогдох хэвлэлүүд

  • 
    JBL Xtreme тойм - хэцүү сонголт Батерейны ашиглалтын хугацаа
  • 
    PSD файлыг Photoshopгүйгээр хэрхэн нээх (засах) вэ
  • 
    Хатуу диск хагарч, шажигнавал яах вэ
  • 
    MTS гар утасны интернетийг асуудалгүйгээр хэрхэн тохируулах вэ