{"id":774,"date":"2011-04-21T14:50:55","date_gmt":"2011-04-21T18:50:55","guid":{"rendered":"http:\/\/www.iowawebnet.com\/ein\/?p=774"},"modified":"2011-05-10T10:41:34","modified_gmt":"2011-05-10T14:41:34","slug":"text-box-autosugestautocomplete","status":"publish","type":"post","link":"https:\/\/www.iowawebnet.com\/ein\/2011\/04\/text-box-autosugestautocomplete\/","title":{"rendered":"Text-box autocomplete"},"content":{"rendered":"

The code is initial designed by Mircho Mirev [ momche.net<\/a> ]. I’ve enhanced this script so instead of array of static data the text-box auto-complete uses database back end.<\/p>\n

\"\"<\/p>\n

Default.asp<\/strong><\/p>\n

<%@LANGUAGE=”VBSCRIPT” CODEPAGE=”65001″%>
\n<!DOCTYPE HTML PUBLIC “-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN” “http:\/\/www.w3.org\/TR\/html4\/loose.dtd”>
\n<html>
\n<head>
\n<meta http-equiv=”Content-Type” content=”text\/html; charset=utf-8″>
\n<title>Intellisense Example<\/title>
\n<SCRIPT language=”JavaScript” src=”moautocomplete.js”><\/SCRIPT>
\n<\/head>
\n<body style=”font-family: Verdana, Geneva, sans-serif; font-size: 12px;”>
\n<div style=”padding-top: 200px; font-family: Verdana; font-size: 12px;”>
\n<%
\n‘ Set up one data series for each category of product
\nSet objConn = Server.CreateObject(“ADODB.Connection”)
\ndbPath = Server.MapPath(“Intellisense.accdb”)
\nobjConn.Open “Provider=Microsoft.ACE.OLEDB.12.0;Data Source=” & dbPath, “”, “”
\nSET objRS = Server.CreateObject(“ADODB.RecordSet”)
\nobjRS.Open “SELECT * FROM Applicants ORDER BY sProgram”,objConn,1,2
\n%>
\n<form method=”get”>
\n<b>Intellisense\/autocomplete textbox<\/b> with db backend<br \/><br \/><\/p>\n

Scholarship Program: <INPUT id=”program” type=”text” name=”program” autocomplete=”list:
\n<%
\nWhile Not objRS.EOF
\nResponse.Write(objRS(“sProgram”)&”|”)
\nobjRS.MoveNext
\nWEND
\n%>”><input type=”submit” id=”submit” value=”GO!”>
\n<\/form>
\n<\/div>
\n<\/body>
\n<\/html><\/p><\/blockquote>\n

Moautocomplete.js<\/strong><\/p>\n

var cAutocomplete =
\n{
\nsDescription : ‘autcomplete class’
\n}<\/p>\n

cAutocomplete.complete = function( hEvent )
\n{
\nif( hEvent == null )
\n{
\nvar hEvent = window.hEvent
\n}<\/p>\n

var hElement = ( hEvent.srcElement ) ? hEvent.srcElement : hEvent.originalTarget<\/p>\n

var sAA = hElement.getAttribute( ‘autocomplete’ ).toString()
\nif( sAA.indexOf( ‘array:’ ) >= 0 )
\n{
\nhArr = eval( sAA.substring( 6 ) )
\n}
\nelse if(\u00a0 sAA.indexOf( ‘list:’ ) >= 0 )
\n{
\nhArr = sAA.substring( 5 ).split( ‘|’ )
\n}<\/p>\n

if( hEvent.keyCode == 16 )
\n{
\nreturn
\n}
\nvar sVal = hElement.value.toLowerCase()
\nif( hEvent.keyCode == 8 )
\n{
\nsVal = sVal.substring( 0, sVal.length – 1 )
\n}
\nif( sVal.length < 1 )
\n{
\nreturn
\n}
\nfor( var nI = 0; nI < hArr.length; nI++ )
\n{
\nsMonth = hArr[ nI ]
\nnIdx = sMonth.toLowerCase().indexOf( sVal, 0 )
\nif( nIdx == 0 && sMonth.length > sVal.length )
\n{
\nhElement.value = hArr[ nI ]
\nif( hElement.createTextRange )
\n{
\nhRange = hElement.createTextRange()
\nhRange.findText( hArr[ nI ].substr( sVal.length ) )
\nhRange.select()
\n}
\nelse
\n{
\nhElement.setSelectionRange( sVal.length, sMonth.length )
\n}
\nreturn
\n}
\n}
\n}<\/p>\n

cAutocomplete.init = function()
\n{
\nvar nI = 0
\nvar aInputs = document.getElementsByTagName( ‘INPUT’ )
\nfor( var nI = 0; nI < aInputs.length; nI ++ )
\n{
\nif( aInputs[ nI ].type.toLowerCase() == ‘text’ )
\n{
\nvar sLangAtt = aInputs[ nI ].getAttribute( ‘autocomplete’ )
\nif( sLangAtt )
\n{
\nif( document.attachEvent )
\n{
\naInputs[ nI ].attachEvent( ‘onkeyup’, cAutocomplete.complete )
\n}
\nelse if( document.addEventListener )
\n{
\naInputs[ nI ].addEventListener( ‘keyup’, cAutocomplete.complete, false )
\n}
\n}
\n}
\n}
\n}<\/p>\n

if( window.attachEvent )
\n{
\nwindow.attachEvent( ‘onload’, cAutocomplete.init )
\n}
\nelse if( window.addEventListener )
\n{
\nwindow.addEventListener( ‘load’, cAutocomplete.init, false )
\n}<\/p><\/blockquote>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

The code is initial designed by Mircho Mirev [ momche.net ]. I’ve enhanced this script so instead of array of static data the text-box auto-complete uses database back end. Default.asp <%@LANGUAGE=”VBSCRIPT” CODEPAGE=”65001″%> <!DOCTYPE HTML PUBLIC “-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN” “http:\/\/www.w3.org\/TR\/html4\/loose.dtd”> <html> <head> <meta http-equiv=”Content-Type” content=”text\/html; charset=utf-8″> <title>Intellisense Example<\/title> <SCRIPT language=”JavaScript” src=”moautocomplete.js”><\/SCRIPT> <\/head> <body style=”font-family: Verdana, […]<\/p>\n","protected":false},"author":35,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,17,33,43],"tags":[30,34,37],"class_list":["post-774","post","type-post","status-publish","format-standard","hentry","category-access","category-applications","category-classic-asp","category-javascript-2","tag-access-2","tag-classic-asp-2","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.iowawebnet.com\/ein\/wp-json\/wp\/v2\/posts\/774"}],"collection":[{"href":"https:\/\/www.iowawebnet.com\/ein\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.iowawebnet.com\/ein\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.iowawebnet.com\/ein\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/www.iowawebnet.com\/ein\/wp-json\/wp\/v2\/comments?post=774"}],"version-history":[{"count":12,"href":"https:\/\/www.iowawebnet.com\/ein\/wp-json\/wp\/v2\/posts\/774\/revisions"}],"predecessor-version":[{"id":794,"href":"https:\/\/www.iowawebnet.com\/ein\/wp-json\/wp\/v2\/posts\/774\/revisions\/794"}],"wp:attachment":[{"href":"https:\/\/www.iowawebnet.com\/ein\/wp-json\/wp\/v2\/media?parent=774"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.iowawebnet.com\/ein\/wp-json\/wp\/v2\/categories?post=774"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.iowawebnet.com\/ein\/wp-json\/wp\/v2\/tags?post=774"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}