charlieroker
asked on
Autocomplete / Type-aheadscripting, from drop down box.
I am trying to get an auto complete function to work within a drop down box. I have managed to get a text field to autocomplete and then propogate info into the drop down. Info for the drop down is gathered from a MYSQL database.
I am using java script to complete the box.
Any help or ideas would be most useful.
Thanks to Zvonko already for the Jscript already being used!!
( https://www.experts-exchange.com/questions/20433351/JS-Select-Box-Type-Ahead.html)
Please see code below:
<?php require_once('Connections/ turner.php '); ?>
<?php
mysql_select_db($database_ turner, $turner);
$query_RSturner1 = "SELECT * FROM customers ORDER BY CompanyName ASC";
$RSturner1 = mysql_query($query_RSturne r1, $turner) or die(mysql_error());
$row_RSturner1 = mysql_fetch_assoc($RSturne r1);
$totalRows_RSturner1 = mysql_num_rows($RSturner1) ;
?>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT LANGUAGE=javascript>
<!--
var to_find = ""; // Variable that acts as keyboard buffer
var timeoutID = ""; // Process id for timer (used when stopping
// the timeout)
timeoutInterval = 400; // Milliseconds. Shorten to cause keyboard
// buffer to be cleared faster
var timeoutCtr = 0; // Initialization of timer count down
var timeoutCtrLimit = 3 ; // Number of times to allow timer to count
// down
function idle(){
timeoutCtr += 1
if(timeoutCtr > timeoutCtrLimit){
to_find="";
timeoutCtr = 0;
window.clearInterval(timeo utID);
}
}
function findMatch(selectBox, txtFind, objEvent) {
if (txtFind == '' || objEvent.keyCode == 8) {
return;
}
// Key press buffer
// Stop Timer
window.clearInterval(timeo utID)
var c = String.fromCharCode(objEve nt.keyCode );
c = c.toLowerCase();
to_find += c;
// Reset timer
timeoutID = window.setInterval("idle() ", timeoutInterval);
allWords = selectBox.options;
var posLow = 0;
var posHigh = selectBox.options.length;
var foundIt = false;
var st2 = new String(to_find);
s2 = st2.toLowerCase();
while (posLow <= posHigh) {
posMid = Math.floor((posLow + posHigh) / 2);
s = selectBox.options[posMid]. text;
st = new String(s);
s = st.toLowerCase();
if (s.indexOf(s2) == 0) {
foundIt = true;
selectBox.selectedIndex = posMid;
// Highlight the remaining text
var typed_string = new String(s2);
var total_string = new String(s);
var t = total_string.length - (total_string.length - typed_string.length);
end_string = total_string.substr(t, total_string.length);
txtFind.value = s;
if (end_string != "") {
var range = txtFind.createTextRange();
range.findText(end_string)
range.select();
}
break;
} else {
if (s2 < s) {
posHigh = posMid - 1;
} else {
posLow = posMid + 1;
}
}
}
if (!foundIt) {
selectBox.selectedIndex = 0;
}
}
//-->
</SCRIPT>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(p arseInt(ap pVersion)= =4)) {
document.MM_pgW=innerWidth ; document.MM_pgH=innerHeigh t; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_p gW || innerHeight!=document.MM_p gH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css">
<!--
.text {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #444444;
background-color: #FFEAEA;
}
-->
</style>
</head>
<body>
<form name="form1" method="post" action="">
<input name="text" type="theselect" onKeyUp="findMatch(this.fo rm.thesele ct, this, event);">
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; visibility: visible;">
<select name="theselect" class="text" id="select">
<?php
do {
?>
<option value="<?php echo $row_RSturner1['CompanyNam e']?>"><?p hp echo $row_RSturner1['CompanyNam e']?></opt ion>
<?php
} while ($row_RSturner1 = mysql_fetch_assoc($RSturne r1));
$rows = mysql_num_rows($RSturner1) ;
if($rows > 0) {
mysql_data_seek($RSturner1 , 0);
$row_RSturner1 = mysql_fetch_assoc($RSturne r1);
}
?>
</select>
</div>
<br>
<br>
<font size="2" face="Courier New, Courier, mono">tlll</font>
</form>
</body>
</html>
<?php
mysql_free_result($RSturne r1);
?>
I am using java script to complete the box.
Any help or ideas would be most useful.
Thanks to Zvonko already for the Jscript already being used!!
( https://www.experts-exchange.com/questions/20433351/JS-Select-Box-Type-Ahead.html)
Please see code below:
<?php require_once('Connections/
<?php
mysql_select_db($database_
$query_RSturner1 = "SELECT * FROM customers ORDER BY CompanyName ASC";
$RSturner1 = mysql_query($query_RSturne
$row_RSturner1 = mysql_fetch_assoc($RSturne
$totalRows_RSturner1 = mysql_num_rows($RSturner1)
?>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT LANGUAGE=javascript>
<!--
var to_find = ""; // Variable that acts as keyboard buffer
var timeoutID = ""; // Process id for timer (used when stopping
// the timeout)
timeoutInterval = 400; // Milliseconds. Shorten to cause keyboard
// buffer to be cleared faster
var timeoutCtr = 0; // Initialization of timer count down
var timeoutCtrLimit = 3 ; // Number of times to allow timer to count
// down
function idle(){
timeoutCtr += 1
if(timeoutCtr > timeoutCtrLimit){
to_find="";
timeoutCtr = 0;
window.clearInterval(timeo
}
}
function findMatch(selectBox, txtFind, objEvent) {
if (txtFind == '' || objEvent.keyCode == 8) {
return;
}
// Key press buffer
// Stop Timer
window.clearInterval(timeo
var c = String.fromCharCode(objEve
c = c.toLowerCase();
to_find += c;
// Reset timer
timeoutID = window.setInterval("idle()
allWords = selectBox.options;
var posLow = 0;
var posHigh = selectBox.options.length;
var foundIt = false;
var st2 = new String(to_find);
s2 = st2.toLowerCase();
while (posLow <= posHigh) {
posMid = Math.floor((posLow + posHigh) / 2);
s = selectBox.options[posMid].
st = new String(s);
s = st.toLowerCase();
if (s.indexOf(s2) == 0) {
foundIt = true;
selectBox.selectedIndex = posMid;
// Highlight the remaining text
var typed_string = new String(s2);
var total_string = new String(s);
var t = total_string.length - (total_string.length - typed_string.length);
end_string = total_string.substr(t, total_string.length);
txtFind.value = s;
if (end_string != "") {
var range = txtFind.createTextRange();
range.findText(end_string)
range.select();
}
break;
} else {
if (s2 < s) {
posHigh = posMid - 1;
} else {
posLow = posMid + 1;
}
}
}
if (!foundIt) {
selectBox.selectedIndex = 0;
}
}
//-->
</SCRIPT>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(p
document.MM_pgW=innerWidth
else if (innerWidth!=document.MM_p
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css">
<!--
.text {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #444444;
background-color: #FFEAEA;
}
-->
</style>
</head>
<body>
<form name="form1" method="post" action="">
<input name="text" type="theselect" onKeyUp="findMatch(this.fo
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; visibility: visible;">
<select name="theselect" class="text" id="select">
<?php
do {
?>
<option value="<?php echo $row_RSturner1['CompanyNam
<?php
} while ($row_RSturner1 = mysql_fetch_assoc($RSturne
$rows = mysql_num_rows($RSturner1)
if($rows > 0) {
mysql_data_seek($RSturner1
$row_RSturner1 = mysql_fetch_assoc($RSturne
}
?>
</select>
</div>
<br>
<br>
<font size="2" face="Courier New, Courier, mono">tlll</font>
</form>
</body>
</html>
<?php
mysql_free_result($RSturne
?>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Zvonko
It works if you type in the text box and then want the answer in the drop down. What I want is the answer in the drop down and I want to type in the drop down as well.
At the moment if you type in the drop down it just moves to the first entry corresponding to the key pressed.
Is that any clearer?
It works if you type in the text box and then want the answer in the drop down. What I want is the answer in the drop down and I want to type in the drop down as well.
At the moment if you type in the drop down it just moves to the first entry corresponding to the key pressed.
Is that any clearer?
can we please split the problem in php and JavaScript problem.
For the JavaScript side would be best to have one browser resulting html page with your actual content.
In this php mixture we can only guess what your data would be.
Please resubmit a browser html version of your script.
I know that you have afterwards the work to maintain our proposals in your php produced version, but this is the only practicle way.
So long,
Zvonko