Jump to content

Using .js var in database <input> suggestions

dreamwest

By dreamwest
in MySQL Help

 Share

Recommended Posts

dreamwest Advanced Member

dreamwest

Posted
Posted

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

Link to comment
https://forums.phpfreaks.com/topic/82320-using-js-var-in-database-suggestions/
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.