CSS3 ile Client-side (kullanıcı taraflı) full-text search (tam metin arama)

CSS3 ile Client-side(kullanıcı taraflı) dinamik olarak CSS ile full-text search(tam metin arama) işleminin CSS3 ile gelen yeni özellikler sayesinde yapılabildiğini öğrenmiş oldum. CSS3 ile gelen data-index özelliği bu konuda bize çok yardımcı olmaktadır.

CSS3 ile Client-side(kullanıcı taraflı) dinamik olarak CSS ile full-text search(tam metin arama) işlemini bir örnek ile açıklamak gerekirse bir kullanıcı listemiz olduğunu varsayalım içinde Ad,Soyad,Eposta ve Telefon bilgilerinin olduğu ve birde arama kutumuz olsun. Arama kutumuza kullanıcı bilgilerinden tüm alanlarda arama yapabileceğimiz şekilde arama yapabileceğimiz şekilde yapalım.

Öncelikle kullanıcı listesi oluşturduk aşağıdaki kod bloğunda görüldüğü gibi;

Arama Listesi

<ul class="contacts">

<!-- Tam metin aramayı etkinleştirmek için data-index özniteliğine aranıcak  metinleri eklememiz gerekiyor -->
<!-- Aramayı büyük küçük harf duyarsız yapmak için metinleri küçük harfle yazmayı unutmayın -->

<li class="searchable" data-index="ergintuzeret@uzmanim.net(222)333-4455">
<dl>
<dt>Adı</dt><dd>Ergin</dd>
<dt>Soyadı</dt><dd>Tüzer</dd>
<dt>Eposta</dt><dd>et@uzmanim.net</dd>
<dt>Telefon</dt><dd>(222)333-4455</dd>
</dl>
</li>

<li class="searchable" data-index="mustafabakarmustafa.bakar@gmail.com(333)444-6677">
<dl>
<dt>Adı</dt><dd>Mustafa </dd>
<dt>Soyadı</dt><dd>Bakar</dd>
<dt>Eposta</dt><dd>mustafa.bakar@gmail.com</dd>
<dt>Telefon</dt><dd>(333)444-6677</dd>
</dl>
</li>

<li class="searchable" data-index="zeynepcandanzeynep.candan@hotmail.com(444)555-8899">
<dl>
<dt>Adı</dt><dd>Zeynep </dd>
<dt>Soyadı</dt><dd>Candan</dd>
<dt>Eposta</dt><dd>zeynep.candan@hotmail.com</dd>
<dt>Telefon</dt><dd>(444)555-8899</dd>
</dl>
</li>

</ul>

Kullanıcı listemizden sonra arama kutumuzu ve arama kutumuza girildiğinde Client-side(kullanıcı taraflı) arama yapacağımız kod bloğumuzu yazdık.

Arama işlemini yapacağımız kod bloğu

<input type="text" placeholder="Arama" id="arama">
<style id="arama_stili"></style>
<script type="text/javascript">
var AramaStili = document.getElementById('arama_stili');
document.getElementById('arama').addEventListener('input', function() {
if (!this.value) {
AramaStili.innerHTML = "";
return;
}
AramaStili.innerHTML = ".searchable:not([data-index*=\"" + this.value.toLowerCase() + "\"]) { display: none; }";
});
</script>

Bu kodlarımızı yazdıktan sonra arama kutumuza kullanıcı listemizden herhangi bir kullanıcı ait bilgilerinden herhangi birini girdiğimizde o kullanıcıya ait bilgiler listelenecektir.