Aranan kelimeleri renklendirmek js

Merhabalar, işinize yarayabilecek bir başka özellikle karşınızdayım. Kullanıcının, arama kutusundan (searchbox)’dan aradıkları kelimeleri renkli olarak göstermek istiyoruz. Benim kullandığımda çokllu renklendirme var. Aranan kelimeler boşlukla bölünüp aranıyor  En basit yoldan anlatıyorum.

1.adım 

https://github.com/julmot/mark.js/

<script type="text/javascript" src="js/mark.min.js"></script>

buradan src klasörünün içinde  mark.js dosyası var onu indip projenize eklemek. Jquery bende var sizde yoksa onuda eklemeniz lazım

2.adım

yazıları listelediğiniz div nereyse onu belirlemek

Örneğin

<p id="icerik"> yazılar buraya gelicek </p>

3.adım renklenecek kelimeleri belirtme, (aranan cümleyi değişkene atarsınız aşağıda basarsınız gerisi size kalmış)

<script>

  var  context = document.querySelector("#icerik"); // requires an element with class "context" to exist
  var  instance = new Mark(context);
  instance.mark("demans belirtileri"); // 

</script>

4.adım css, özelleştirmek isterseniz renka plan rengi vs

<style>
  mark{
    background: #f8d086 ;
    color: black;
  }
</style>

hepsi bu kadar daha çok özellikleri vardır. Araştırıp bakmak gerek. Daha fazlasını merak edenler için şuradan inceleyebilirsiniz. https://github.com/julmot/mark.js/

Bir cevap yazın