Local Search Box

Ilya Lyubinskiy Dec 3, 2007

General

This script can be used to create a dropdown search box for your Web site, just like we use on our forums. You can also create dropdown search forms, hint boxes, and menus. The search box will appear to the right when you click the link. It can be adjusted in many different ways.

Site Search

Notes

Created by: Ilya S. Lyubinskiy
Web Site: http://www.php-development.ru/
Posted: December 3, 2007

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: localSearchBox.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com */

// Copyright (C) 2005 Ilya S. Lyubinskiy. All rights reserved.
// Technical support: http://www.php-development.ru/
// http://www.php-development.ru/javascripts/dropdown.php
//
// YOU MAY NOT
// (1) Remove or modify this copyright notice.
// (2) Distribute this code, any part or any modified version of it.
//     Instead, you can link to the homepage of this code:
//     http://www.php-development.ru/javascripts/dropdown.php.
//
// YOU MAY
// (1) Use this code on your website.
// (2) Use this code as a part of another product provided that
//     its main use is not creating javascript menus.
//
// NO WARRANTY
// This code is provided "as is" without warranty of any kind, either
// expressed or implied, including, but not limited to, the implied warranties
// of merchantability and fitness for a particular purpose. You expressly
// acknowledge and agree that use of this code is at your own risk.


// ***** Popup Control *********************************************************

function at_display(x) {
  var win = window.open();
  for (var i in x) win.document.write(i+' = '+x[i]+'<br>');
}

// ***** Show Aux *****

function at_show_aux(parent, child) {
  var p = document.getElementById(parent);
  var c = document.getElementById(child );
  var top  = (c["at_position"] == "y") ? p.offsetHeight+2 : 0;
  var left = (c["at_position"] == "x") ? p.offsetWidth +2 : 0;

  for (; p; p = p.offsetParent) {
    top  += p.offsetTop;
    left += p.offsetLeft;
  }

  c.style.position   = "absolute";
  c.style.top        = top +'px';
  c.style.left       = left+'px';
  c.style.visibility = "visible";
}

// ***** Show *****

function at_show() {
  var p = document.getElementById(this["at_parent"]);
  var c = document.getElementById(this["at_child" ]);
  at_show_aux(p.id, c.id);
  clearTimeout(c["at_timeout"]);
}

// ***** Hide *****

function at_hide() {
  var c = document.getElementById(this["at_child"]);
  c["at_timeout"] = setTimeout("document.getElementById('"+c.id+"').style.visibility = 'hidden'", 333);
}

// ***** Click *****

function at_click() {
  var p = document.getElementById(this["at_parent"]);
  var c = document.getElementById(this["at_child" ]);

  if (c.style.visibility != "visible")
    at_show_aux(p.id, c.id);
  else c.style.visibility = "hidden";
  return false;
}

// ***** Attach *****

// PARAMETERS:
// parent   - id of visible html element
// child    - id of invisible html element that will be dropdowned
// showtype - "click" = you should click the parent to show/hide the child
//            "hover" = you should place the mouse over the parent to show
//                      the child
// position - "x" = the child is displayed to the right of the parent
//            "y" = the child is displayed below the parent
// cursor   - Omit to use default cursor or check any CSS manual for possible
//            values of this field

function at_attach(parent, child, showtype, position, cursor) {
  var p = document.getElementById(parent);
  var c = document.getElementById(child);

  p["at_parent"]     = p.id;
  c["at_parent"]     = p.id;
  p["at_child"]      = c.id;
  c["at_child"]      = c.id;
  p["at_position"]   = position;
  c["at_position"]   = position;

  c.style.position   = "absolute";
  c.style.visibility = "hidden";

  if (cursor != undefined) p.style.cursor = cursor;

  switch (showtype) {
    case "click":
      p.onclick     = at_click;
      p.onmouseout  = at_hide;
      c.onmouseover = at_show;
      c.onmouseout  = at_hide;
      break;
    case "hover":
      p.onmouseover = at_show;
      p.onmouseout  = at_hide;
      c.onmouseover = at_show;
      c.onmouseout  = at_hide;
      break;
  }
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  at_attach("src_parent", "src_child", "click", "x", "pointer");
});

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

div.sample_attach, a.sample_attach {
  width: 100px;
  border: 1px solid #DFAD00;
  background: #FFFFEE;
  padding: 0px 5px;
  font-weight: 900;
  color: #00009C;
  text-align: center;
}

a.sample_attach {
  display: block;
  border-bottom: none;
  text-decoration: none;
}

form.sample_attach {
  position: absolute;
  visibility: hidden;
  border: 1px solid #DFAD00;
  background: #FFFFEE;
  color: #00009C;
  padding: 0px 5px 2px 5px;
  text-align: center;
}

Head

Paste this code into the HEAD section of your HTML document.


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

Body

Paste this code into the BODY section of your HTML document


<div class="sample_attach" id="src_parent">
Site Search
</div>
<form class="sample_attach" id="src_child">
<b>Enter search terms:</b><br>
<input style="margin-bottom: 1px; width: 170px;" type="text" name="terms"><br>
<input type="submit" value="Submit"></center>
</form>

Leave a Response

(2 comments)

You need to keep the cursor focus on the search box.[br /][br /]It's only a script for the box. There is no built-in search capabilities. You will need to find a search script, such as [a href="http://www.perlfect.com/freescripts/search/"]Perlfect[/a]

Lee Underwood Jan 29, 2008

Whenever I begin typing in a search word the dialog box disappears. I am using Mozilla 2 and doing this on the JavaScript Internet site. Clicking on the dialog box then causes it to reappear, where corrections can be made. I think this would worry visitors.[br /]Question: Does it search the entire site?

Nomisacri Dec 7, 2007

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details