« »

This is a JavaScript custom object that uses an array assigned to an input text box. It will fire on the onkeyup event and read from the array and act accordingly. It is very simple to use.

Label: Auto-Complete, autocomplete, object, array, onkeyup event

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<script language="javascript">
// Create by Paul Avery

var autocomplete = {
  initialize: function(){
    var theBody = document.getElementsByTagName('body').item(0);
    var theResults = document.createElement('div');
    theResults.setAttribute('id', 'theResults');
    theResults.style.left = '0px';
    theResults.style.top = '0px';
    theResults.style.position = 'absolute';
    theResults.style.zIndex = '99';
    theResults.style.border = '1px solid #aaaaaa';
    theResults.style.display = 'none';
    theBody.appendChild(theResults);
  },

  fill: function(val){
    this.theInput.value = val;
    this.theInput.style.background = '#ffffff';
    theResults.innerHTML = '';
    theResults.style.display = 'none';
  },

  change: function(obj, event, arr){
    var theInput = obj;
    this.theInput = theInput;

    var theResults = document.getElementById('theResults');
    if(theInput.value == ''){
      theInput.style.background = '#ffffff';
      theResults.innerHTML = '';
      theResults.style.display = 'none';
    }
    else{
      var obj = theInput;
      if(obj.offsetParent){
        x = obj.offsetLeft;
        y = obj.offsetTop;
        h = obj.offsetHeight;
        w = obj.offsetWidth;
        while(obj = obj.offsetParent){
          x += obj.offsetLeft;
          y += obj.offsetTop;
        }
      }

      var totalChars = theInput.value.length;
      var resultsTotal = 0;
      theResults.innerHTML = '';
      var exactItem = false;
      for(i=0;i<arr.length;i++){
        if(arr[i].substr(0, totalChars).toLowerCase() == theInput.value.substr(0, totalChars).toLowerCase()){
          if(resultsTotal == 0 && event.keyCode !== 8){theInput.value = arr[i];}
          resultsStyle = 'font-family: arial; font-size: 12px; color: #000000; text-decoration: none; padding: 5px; display: block';
          theResults.innerHTML += '<a href="javascript:autocomplete.fill('' + arr[i] + '')" style="' + resultsStyle + '">' + arr[i] + '</a>';
          resultsTotal++;
        }
        if(arr[i].toLowerCase() == theInput.value.toLowerCase()){exactItem = true;}
      }
      if(resultsTotal == 0){theInput.style.background = '#ffaaaa';}
      else{theInput.style.background = '#ffffff';}

      if(event.keyCode !== 8){
        if(document.all){
          var theRange = theInput.createTextRange();
          theRange.moveStart('character', totalChars);
          theRange.moveEnd('character', theInput.value.length);
          theRange.select();
        }
        else{
          theInput.setSelectionRange(totalChars, theInput.value.length);
        }
        theInput.focus();
      }

      if(exactItem && resultsTotal < 2){
        theInput.style.background = '#ffffff';
        theResults.innerHTML = '';
        theResults.style.display = 'none';
      }
      else if(resultsTotal == 0){
        theInput.style.background = '#ffaaaa';
        theResults.innerHTML = '';
        theResults.style.display = 'none';
      }
      else{
        theResults.style.left = x + 'px';
        theResults.style.top = (y + h) + 'px';
        theResults.style.display = 'block';
      }
    }
  }
}

</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

Type any character<br />
Type your choice of state here: <input onkeyup="autocomplete.change(this, event, states)" />
</fieldset>
</center>

<SCRIPT type=text/javascript>
var states = [
'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'District of Columbia',
'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland',
'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania',
'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington',
'West Virginia', 'Wisconsin', 'Wyoming'
];
autocomplete.initialize();
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->