Full version: jsB@nk » Form » Simple Auto-Complete
URL: https://www.javascriptbank.com/simple-auto-complete.html
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.
Full version: jsB@nk » Form » Simple Auto-Complete
URL: https://www.javascriptbank.com/simple-auto-complete.html
<script language="javascript">// Create by Paul Averyvar 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-->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-->