Using .js var in database <input> suggestions

dreamwest · December 19, 2007

I have a script:

<head>
<style>body {
background-color:#ffffff;
color: #484848; 
font-size:0.9em;
margin:0px;
font-family: Verdana,Arial,Helvetica;	

}
td {
font-size:0.7em;

}
a {
color:#484848;
font-weight : bold;
}
a:visited {
	color: #909090;
}
a:hover {
color: #990000;
}


table.main {width:800px;

}

/* Header */

h1 {font-size:1.5em;
padding-top:3px;
margin-left:10px;
color:#123456;
}
h2 {font-size:1.3em;
padding-top:3px;
margin-left:10px;
color:#123456;
}
h3 {font-size:1.2em;
padding-top:3px;
margin-left:10px;
color:#123456;
}

ul  {
font-weight:bold;
}

ol  {
font-weight:bold;
}

.orange {
width:100%;
height:20px;
background-color:#FF2F2F;
color:#ffffff;
font-weight:bold;

}

.title {
width:100%;
height:20px;
background-color:#FFF3DB;
}
.yellow {
background-color:#FFF3DB;
}</style>

<script>/**
* @author Natalia Bazhenova www.fh54.de (c) 2005-2007
*/

/********************************/
/*******start config****************/
/*******************************/
//array with suggest texts

var opttext=[
"Amsterdam","Berlin","Bern","Prag","Paris","Vienna","Warsaw","Rome","Riga","Tallinn","Vilnius","Lisbon",
"Madrid","Athens","Sofia","London","Bucharest","Budapest","Bratislava","Ljublana","Beograd","Brussels",
"Helsinki","Stockholm","Copenhagen","Oslo","Dublin","Vaduz"
]
//id of the textbox element
var inputID="inputSelect"
//max size of "selectbox"
var maxcount=5 
/*******************************/
/**********end config***********/
/*******************************/

opttext.sort();
var scripting=false;
//initialize:
//for mozilla
if (window.captureEvents) {
    window.captureEvents(Event.LOAD)
    window.onload=suggestInput_init;
}
//for ie
document.onreadystatechange=ieInit;
function ieInit()
{
   if (document.readyState=="complete")
   {
      document.body.onload=function() {suggestInput_init()}
   }
}
var SIs //initially invisible select box
var SItxt //the main input text element
var newdiv=document.createElement("DIV") //a visible pendant to select box
var globalN=0; //how much options scrolled up
//for ie
if (document.attachEvent)
document.attachEvent("onclick",hideSelect)
// for Mozilla
if (document.captureEvents) {
document.captureEvents(Event.CLICK);
document.onclick = hideSelect;
}
function hideSelect() {
newdiv.style.display="none"
}
function suggestInput_init() {
if (document.createElement("DIV")) { //otherwise nothing happens
	scripting=true;
	SIs=document.createElement("SELECT")
	SIs.onkeyup=function(e){
		if(!e) e=event; setInputValue(this.selectedIndex,e)
	}
	SIs.className="select_input"
	SIs.setAttribute("id","selectInput");
	SIs.style.position="absolute"
	SIs.style.top="-9999px"
	SIs.style.left="-9999px"
	SIs.style.visibility="hidden"
	document.body.appendChild(SIs)
	SItxt =document.getElementById(inputID);
	SItxt.setAttribute("autocomplete","OFF")
	SItxt.onkeyup=function(e){
		if (!e) e=event; showSelection(this.value,e)
	}
	SItxt.focus()
	for (i=0;i<opttext.length;i++) {
		o=document.createElement("OPTION");;
		o.innerHTML=opttext[i];
		SIs.appendChild(o)
		SIs.style.visibility="visible"; // for Opera
	}
	elt=SItxt 
	//find coords where the suggest div will appear
	pos2=findPos(elt); pos2.push(elt.offsetHeight); pos2.push(elt.offsetWidth)

	newdiv.style.top=(pos2[1]+pos2[2])+'px';
	newdiv.style.left=pos2[0]+'px';
	newdiv.style.width=pos2[3]+'px';
	newdiv.className="suggestBoxContainer"
	newdiv.style.display="none"
	buildDiv(0)
	document.body.appendChild(newdiv)
 }
} 

function buildDiv(n) {
if (n>SIs.childNodes.length) 
	return false; 
for (i=0;i<newdiv.childNodes.length;i++) {
	newdiv.removeChild(newdiv.childNodes[i]);i--
}
if (n>0) {// insert top "..." - div
	d1=document.createElement("DIV");
	d1.id="lessDiv"
	d1.style.width="100%"
	d1.style.fontSize="0.8em"
	d1.onmouseover=function() {this.className="mouse_over";}
	d1.onmouseout=function() {this.className="suggestBox"}
	d1.onclick=function() {
		buildDiv(n-1);
		d1.className="mouse_over"
	} 
	d1.innerHTML="......"; 
	newdiv.appendChild(d1); 
}
m=(maxcount<SIs.childNodes.length)?(maxcount):(SIs.childNodes.length)
for(i=0;i<m;i++) {
	d=document.createElement("DIV")
	d.style.width="100%"
	d.style.fontSize="0.8em"
	d.onmouseover=function() {
		this.className="mouse_over";
		SItxt.value=this.innerHTML
	}
	d.onmouseout=function() {
		this.className='suggestBox'
	}
	d.onclick=function() {
		SItxt.value=this.innerHTML;
		newdiv.style.display="none"
	}
	try {
		d.innerHTML=SIs.childNodes[i+n].innerHTML;
	}
	catch(err) {}
	newdiv.appendChild(d)
};
globalN=n;
if (SIs.childNodes.length-n>maxcount) {// insert bottom "..." - div
	d2=document.createElement("DIV");
	d2.id="moreDiv"
	d2.style.width="100%"
	d2.style.fontSize="0.8em"
	d2.onmouseover=function() {this.className="mouse_over";}
	d2.onmouseout=function() {this.className="suggestBox";}
	d2.onclick=function() {
		buildDiv(n+1); 
		d2.className="mouse_over";
	}
	d2.innerHTML="......"; 
	d2.className="suggestBox";
	newdiv.appendChild(d2) 
 } 
}

function setInputValue(m,ev) {
if (!scripting) return;
isLess=(document.getElementById("lessDiv"))?(1):(0)
if (m>globalN+maxcount+isLess+1) {
	m=globalN+maxcount;SIs.selectedIndex=m
}
if (m<isLess) {
	m=globalN-1;SIs.selectedIndex=globalN-1
}
a=SIs.childNodes[m].innerHTML
SItxt.value=a;
try {
	if (newdiv.childNodes[m-globalN+isLess]) {  
		if (newdiv.childNodes[m-globalN+isLess].id=="moreDiv") { 
			buildDiv(globalN+1);  
			newdiv.childNodes[maxcount].className="mouse_over";;
			return
		}
	}
} catch (err) {}
try {
	if (newdiv.childNodes[m-globalN+isLess]) {  
		if (newdiv.childNodes[m-globalN+isLess].id=="lessDiv") {  
			buildDiv(globalN-1);
			isLess_new=(document.getElementById("lessDiv"))?(1):(0)
	 		newdiv.childNodes[isLess_new].className="mouse_over";
	 		return
		}
	}
} catch (err) {}
try {
	for (i=0;i<newdiv.childNodes.length;i++)
		newdiv.childNodes[i].className="suggestBox";
	 newdiv.childNodes[m-globalN+isLess].className="mouse_over";
} catch(err) {}; 
if ((ev.keyCode!=40) && (ev.keyCode!=38) && (ev.keyCode!=0)) { // if not arrow down, arrow up or mouseclick  
	newdiv.style.display="none"
	SItxt.focus();
}
}

function showSelection(t,ev) {
if (!scripting) return;
if (ev.keyCode==40) { // by arrow down comes into suggestion select
	 if (SIs.childNodes.length>0) {
		  newdiv.childNodes[0].className="mouse_over";
		  SItxt.value=SIs.childNodes[0].innerHTML; 
		  try {
		  	SIs.focus();
		  } catch(err){}
		  SIs.childNodes[0].selected=true;
	 }
	 return            
}
if (t=="") 
	return ;
t=t.toLowerCase();
l=t.length; 
for (i=0;i<SIs.childNodes.length;i++) {
	SIs.removeChild(SIs.childNodes[i]);
	i--
}
for(i=0;i<opttext.length;i++) {
	 if (opttext[i].substr(0,l).toLowerCase()==t) {
	  	oOption = document.createElement("OPTION");
	  	SIs.appendChild(oOption)
	 	 oOption.innerHTML = opttext[i];
	 }
}
if (SIs.childNodes.length>0)  {
	newdiv.style.display=""
	buildDiv(0)
} 
else 
	newdiv.style.display="none";
SItxt.focus()
}

/** Source: http://www.quirksmode.org/js/findpos.html - is better than my own**/
function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
	curleft = obj.offsetLeft
	curtop = obj.offsetTop
	while (obj = obj.offsetParent) {
		curleft += obj.offsetLeft
		curtop += obj.offsetTop
	}
} 
return [curleft,curtop];
} </script>
</head>

<body>

<!--Search Box-->
<input type=text id=inputSelect class=input_select>

</body>

It displays a input suggestion as the user types. I want to replace:

//array with suggest texts

var opttext=[
"Amsterdam","Berlin","Bern","Prag","Paris","Vienna","Warsaw","Rome","Riga","Tallinn","Vilnius","Lisbon",
"Madrid","Athens","Sofia","London","Bucharest","Budapest","Bratislava","Ljublana","Beograd","Brussels",
"Helsinki","Stockholm","Copenhagen","Oslo","Dublin","Vaduz"

by a database driven keyword suggestion....

But thats not all...I want to use the users input for future searches.

Does anyone know of a script/program that has these features already, or can someone help me with a sql txt dump for the tables and integration??

Thanks

fenway · December 19, 2007

This is typical AJAX DB functionality.

Sign In

Using .js var in database <input> suggestions

Recommended Posts

dreamwest

Link to comment

Share on other sites

fenway

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information