Home » Webmaster Tools and Resources » Software & Scripts » DHTML » Find In Page Form Free Source Code

Find In Page Form Free Source Code - DHTML Script

This DHTML script mimics the Find (Ctrl+F) feature in your browser. It will look in the current page for whatever text the user inputs. If it finds the text, it highlights the text so the user can see it. If it doesn't find the text, it pops up a JavaScript alert stating that the text was not found on the current page.

Sample:

Insert this code before </head>

<script language="JavaScript">

var NS4 = (document.layers);
var IE4 = (document.all);

var win = window;
var n   = 0;

function findInPage(str) {

  var txt, i, found;

  if (str == "")
    return false;

  if (NS4) {

    if (!win.find(str))
      while(win.find(str, false, true))
        n++;
    else
      n++;

    if (n == 0)
      alert("Not found.");
  }

  if (IE4) {
    txt = win.document.body.createTextRange();

    for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) {
      txt.moveStart("character", 1);
      txt.moveEnd("textedit");
    }

    if (found) {
      txt.moveStart("character", -1);
      txt.findText(str);
      txt.select();
      txt.scrollIntoView();
      n++;
    }

    else {
      if (n > 0) {
        n = 0;
        findInPage(str);
      }

      else
  return false;
        alert("Not found.");
    }
  }

}

</script>

Insert this code before </body>

<form name="search" onSubmit="return findInPage(this.string.value);">
<font size=3><input name="string" type="text" size=15 onChange="n = 0;"></font>
<input type="submit" value="Find">
</form>

Related Resources: