Member Avatar for GaneshKumar1508

Hi to all,

I have to highlight the search terms in the text area.

I have one text Filed,search Button and text area.

After i have enter the search string in the text field whenever i click the search button it highlight the search terms which is available in the text area and focus the search term in text area.

I have try to do this by using jquery.

But in mozilla,I can't get the focus to the search term at the time of search.

I have to scroll down the text area for find the focused search term.

In I.E. also it doesn't work properly.

Otherwise if any post related to highlight search term in text area is also appreciable.


Please guide me to achieve this.

  • 2 Contributors
  • 1 Reply
  • 140 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by fxm
Member Avatar for fxm

Rich (styled) text widgets do exist, but an HTML <textarea> displays only plain text.

However, something like this

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
    <title></title>
    <style type="text/css">
	div { width=600; font-family:monospace }
    </style>
    <script type="text/javascript">
	_undo=""
    </script>
  </head>
  <body>
    <form>
      <input type="text" name='term'> <input type="button" value=
      "highlight" onclick="hi(this)"><br>
    </form>
    <div id="test">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
      ullamcorper neque id massa convallis eget congue ligula
      ullamcorper. Fusce eget rutrum lacus. Morbi eu nibh ligula.
      Etiam vitae dignissim felis. Vivamus a nisi ligula.
      Vestibulum pellentesque cursus luctus. Fusce a purus in risus
      ultricies commodo a in quam. In vel sem ut sem sagittis
      eleifend vitae gravida mauris. Donec turpis sem, pharetra
      fermentum dapibus tempor, sollicitudin id mi. Fusce nulla
      quam, auctor sit amet tristique ut, iaculis nec leo. Morbi
      non magna libero, vel volutpat turpis. Morbi ut nulla nibh,
      et sollicitudin massa. Vivamus tincidunt interdum lorem
      sodales laoreet. Cum sociis natoque penatibus et magnis dis
      parturient montes, nascetur ridiculus mus. Class aptent
      taciti sociosqu ad litora torquent per conubia nostra, per
      inceptos himenaeos. Cras suscipit ultrices orci. Cras mattis
      risus mauris. Suspendisse bibendum sagittis lorem quis
      condimentum. Proin varius tristique ullamcorper. Integer mi
      augue, fermentum nec imperdiet ac, tincidunt sit amet metus.
      Proin ligula lectus, euismod eu ultrices vitae, commodo non
      massa. Quisque dapibus suscipit turpis sit amet accumsan.
      Pellentesque at nulla ipsum, pharetra interdum odio. Donec
      eros eros, pellentesque et malesuada non, sollicitudin ac
      nisi. Aliquam vulputate libero et sapien condimentum ut
      facilisis ligula sagittis. Pellentesque vel lectus odio, eu
      fringilla nisl. Fusce sem ligula, tempus id tempor id,
      fringilla ut eros. Phasellus porttitor neque id ipsum
      volutpat dapibus. Phasellus porta accumsan nunc at
      ullamcorper. Donec lacinia eleifend tellus pulvinar
      ullamcorper. Pellentesque vitae ipsum massa. Aenean ut velit
      a massa pharetra ullamcorper. Donec volutpat, leo fermentum
      adipiscing blandit, diam nisl semper dolor, sed malesuada
      erat ante sed sapien. Duis non enim neque, in ullamcorper
      sapien. Mauris libero dolor, bibendum sed rhoncus vel,
      pellentesque et elit. Phasellus volutpat lacus eu ligula
      accumsan sit amet faucibus diam fringilla. Cum sociis natoque
      penatibus et magnis dis parturient montes, nascetur ridiculus
      mus. Curabitur sagittis, eros eget convallis scelerisque,
      metus nibh adipiscing justo, quis dictum enim tortor ut
      risus. Nulla facilisi. Pellentesque id diam sed sapien
      vehicula malesuada sit amet vel urna. Vestibulum enim lectus,
      condimentum et laoreet ac, ultricies et urna. Maecenas
      sagittis diam a massa sodales sed cursus nulla aliquam. Sed
      vestibulum dui ut nisi molestie imperdiet. Etiam aliquam,
      erat quis iaculis tempor, eros eros auctor leo, a tristique
      arcu purus id eros. Phasellus non lorem augue. Curabitur
      egestas ornare urna, et pellentesque metus tempus eu. Aliquam
      lorem libero, condimentum sed varius et, varius ut enim.
      Integer commodo mattis tortor nec vehicula. Phasellus eget
      elit odio. Nam vel tortor tempus urna ultrices dapibus. Nunc
      nec lectus urna, accumsan malesuada arcu. Ut ac massa mauris,
      quis lobortis eros. Class aptent taciti sociosqu ad litora
      torquent per conubia nostra, per inceptos himenaeos. Aliquam
      leo orci, dignissim eu tincidunt id, fermentum non dui. Proin
      quis mi elit. Cum sociis natoque penatibus et magnis dis
      parturient montes, nascetur ridiculus mus. Suspendisse
      potenti. Nulla facilisi. Aliquam malesuada consectetur metus
      non faucibus. Nunc accumsan cursus libero non convallis. Nam
      arcu urna, tincidunt sit amet imperdiet laoreet, imperdiet
      vitae purus. Nullam sed dignissim augue. Donec convallis
      ligula sed turpis sagittis auctor. Curabitur nec mollis
      purus. Maecenas augue augue, molestie ut accumsan vel, auctor
      condimentum est. Pellentesque tempus auctor lorem vel
      consequat. Aliquam sit amet nunc et leo mollis rhoncus. Nunc
      malesuada lobortis metus, et laoreet magna sollicitudin ut.
      Praesent facilisis ante lectus, eu molestie mauris. Phasellus
      gravida, ante nec pretium viverra, dui magna eleifend ligula,
      nec ullamcorper sem urna pharetra sem. Curabitur consectetur,
      odio id convallis venenatis, sapien magna ornare risus, sed
      tempor neque ipsum ut velit. Morbi lectus enim, sagittis
      interdum tincidunt id, pharetra quis dolor. Fusce rhoncus,
      metus vitae tincidunt aliquet, nisl erat dignissim nisl, quis
      molestie tortor elit in libero.
    </div><br>

    <script type="text/javascript">

	function hi(btn){

		if (btn.form.term.value=='') return
		hiRE = new RegExp("("+btn.form.term.value+")","g")

		var oDiv = document.getElementById('test')
		if (_undo==''){_undo=oDiv.innerHTML}else {oDiv.innerHTML=_undo}

		oDiv.innerHTML=oDiv.innerHTML.replace(hiRE,"<b style='background-color:#99ff99'>$1</b>")
	}
    </script>
  </body>
</html>

comes close to what you want.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.