JavaScript Scripts





Español Français 中文 Deutsch Portuguese Japanese nederlands
   
 
Free Java Script Codes
Javascript List All
Slide Show Slide Show
Ad Display Ad Display
Image Effect Image Effect
Animated Image Effects Animated Image Effects
Form Validation Form Validation
Color Picker Tool Color Picker Tool
Formatting Forms Formatting Forms
Select All Select All
Dynamic Form Select Dynamic Form select
Dynamic Color Dynamic Color
Calendar Script Calendar
Textbox Counter Textbox Counter
Alphanumeric Alphanumeric
Date Time Script Date & Time
Stop Watch Script Stop Watch script
Delete Repeated Values Delete Repeated Values
Pagination Pagination
Random Generator Random Generator
Animated Text Animated Text
Cursor Position Cursor Position
User Info Window / User Info
Security Security / Authenticate
Bookmark Bookmark
Mouse Effects Mouse Effects
Title Bar Title Bar
Status Bar Status Bar
Country List Country List
Free Games Free Games
Calculators Calculators
 




Auto complete Form Script


About
 This Auto complete form field javascript is used to display the words in a form that are stored in an array.If you give one letter to text box, possiblities of words are display in auto complete form.


Features
a) This free javascript makes the user to select difficult words easily from the form.
b) The words are stored in an array.
c) If you type the starting letter of a word the auto complete form will display the entire word starting with that letter.

Preview

Auto complete Form field

Note: Type a,b.. under that some words already stored in an array is displayed. You can get the word automatically if you type one letter in the textbox.



Code
<!-- Scripts by hscripts.com  -->
<!-- Copywrite of HIOXINDIA --->
<!-- More scripts @ www.hscripts.com  -->

<script type="text/javascript">
<!-- Declare the array and store the values according to ur usage -->
var suggestions = new Array("bank", "back", "peter","hindu","huge", "test","bums","cat","kind","fight","argue","append","run","sad","silk","light","little","rate","orange","office","lucky","cable","monitor","narration","early","pick","put","hungry","gain","gift","java","junction","vegtable","fan","north","needle","winter","nation","carry","dance","danger","iteration","facile","yahoo","quick","quee","arrangement","vechicle","urban","xerox","zeebra","xML");
var outp;
var oldins;
var posi = -1;
var words = new Array();
var input;
var key;
function setVisible(visi)
{
  var x = document.getElementById("shadow");
  var t = document.getElementsByName("text")[0];
  x.style.position = 'absolute';
  x.style.top = (findPosY(t)+3)+"px";
  x.style.left = (findPosX(t)+2)+"px";
  x.style.visibility = visi;
}
function init()
{
  outp = document.getElementById("output");
  window.setInterval("lookAt()", 100);
  setVisible("hidden");
  document.onkeydown = keygetter; //needed for Opera...
  document.onkeyup = keyHandler;
}
function findPosX(obj)
{
  var curleft = 0;
  if (obj.offsetParent)
  {
    while (obj.offsetParent)
    {
      curleft += obj.offsetLeft;
      obj = obj.offsetParent;
    }
   }
  else if (obj.x)
    curleft += obj.x;
        return curleft;
}
function findPosY(obj)
{
  var curtop = 0;
  if (obj.offsetParent)
  {
    curtop += obj.offsetHeight;
    while (obj.offsetParent)
    {
      curtop += obj.offsetTop;
      obj = obj.offsetParent;
     }
   }
   else if (obj.y)
   {
     curtop += obj.y;
     curtop += obj.height;
   }
   return curtop;
}
function lookAt()
{
   var ins = document.getElementsByName("text")[0].value;
   if (oldins == ins)
      return;
   else if (posi > -1);
   else if (ins.length > 0)
   {
     words = getWord(ins);
     if (words.length > 0)
     {
        clearOutput();
        for (var i=0;i < words.length; ++i)
             addWord (words[i]);
        setVisible("visible");
        input = document.getElementsByName("text")[0].value;
     }
     else
     {
        setVisible("hidden");
        posi = -1;
     }
   }
   else
   {
    setVisible("hidden");
    posi = -1;
   }
   oldins = ins;
}
function addWord(word)
{
  var sp = document.createElement("div");
  sp.appendChild(document.createTextNode(word));
  sp.onmouseover = mouseHandler;
  sp.onmouseout = mouseHandlerOut;
  sp.onclick = mouseClick;
  outp.appendChild(sp);
}
function clearOutput()
{
  while (outp.hasChildNodes())
  {
    noten=outp.firstChild;
    outp.removeChild(noten);
  }
   posi = -1;
}
function getWord(beginning)
{
  var words = new Array();
  for (var i=0;i < suggestions.length; ++i)
   {
    var j = -1;
    var correct = 1;
    while (correct == 1 && ++j < beginning.length)
    {
     if (suggestions[i].charAt(j) != beginning.charAt(j))
         correct = 0;
    }
    if (correct == 1)
       words[words.length] = suggestions[i];
  }
    return words;
  
}       
function setColor (_posi, _color, _forg)
{
   outp.childNodes[_posi].style.background = _color;
   outp.childNodes[_posi].style.color = _forg;
}
function keygetter(event)
{
  if (!event && window.event) 
      event = window.event;
  if (event)
      key = event.keyCode;
  else
      key = event.which;
}
function keyHandler(event)
{
  if (document.getElementById("shadow").style.visibility == "visible")
  {
     var textfield = document.getElementsByName("text")[0];
     if (key == 40)//key down
     { 
        if (words.length > 0 && posi <= words.length-1)
        {
          if (posi >=0)
            setColor(posi, "#fff", "black");
          else 
             input = textfield.value;
             setColor(++posi, "blue", "white");
             textfield.value = outp.childNodes[posi].firstChild.nodeValue;
        }
      }
      else if (key == 38)
      { //Key up
        if (words.length > 0 && posi >= 0)
         {
           if (posi >=1)
           {
              setColor(posi, "#fff", "black");
              setColor(--posi, "blue", "white");
              textfield.value = outp.childNodes[posi].firstChild.nodeValue;
           }
           else
           {
              setColor(posi, "#fff", "black");
              textfield.value = input;
              textfield.focus();
              posi--;
           }
         }
        }
         else if (key == 27)
         { // Esc
            textfield.value = input;
            setVisible("hidden");
            posi = -1;
            oldins = input;
          }
          else if (key == 8) 
          { // Backspace
            posi = -1;
            oldins=-1;
          } 
              }
   }
    var mouseHandler=function()
    {
      for (var i=0; i < words.length; ++i)
        setColor (i, "white", "black");
      this.style.background = "blue";
      this.style.color= "white";
     }
     var mouseHandlerOut=function()
     {
       this.style.background = "white";
       this.style.color= "black";
     }
     var mouseClick=function()
     {
        document.getElementsByName("text")[0].value = this.firstChild.nodeValue;
        setVisible("hidden");
        posi = -1;
        oldins = this.firstChild.nodeValue;
     }
</script>
<style type="text/css">

.output
{
        font-family:Arial;
        font-size: 10pt;
        color:black;
        padding-left: 3px;
        padding-top: 3px;
        border: 1px solid #000000;
        width: 100px;
        background: #fff;
}
.shadow
{
        width:102px;
        position:relative;
        top: 2px;
        left: 2px;
        background: #555;
}
.shadow div{
        position:relative;
        top: -2px;
        left: -2px;
}

</style>

<body onLoad="init();">
<form name="test" id="test">
<center>
<input type="text" name="text" autocomplete="off"></center>
</form>
<div class="shadow" id="shadow">
<div class="output" id="output">
</div>
</div><div align=center>
©<a href="http://www.hscripts.com" style="color:#3D366F;text-decoration:none;cursor:pointer;font-size:13px">hscripts.com</a></div>
</body>                                                                                         


Usage
a) Copy the above code and create your own autocomplete form.
b) Add your own words by making changes in the following code.
     var suggestions=new Array("word1","word2",...,"word n");
   Make sure that the words in double quotes.
   For example:  "word1","word2".
c) You can store any number of words as you wish.
d) Just copy the code and use it in your web page for free.



License
- The javascript (misspelled as java script) is given under GPL License
- i.e. Free use for those who use the codes as it is.
- Free, if your modification does not remove our copyright information and links.
- Click Here for detailed license information.
- You can purchase the script if your requirements does not meet our GPL License terms.
Other Links

web hosting