Link to home
Start Free TrialLog in
Avatar of charlieroker
charlierokerFlag for United States of America

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_RSturner1, $turner) or die(mysql_error());
$row_RSturner1 = mysql_fetch_assoc($RSturner1);
$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(timeoutID);
}
}
function findMatch(selectBox, txtFind, objEvent) {
if (txtFind == '' || objEvent.keyCode == 8) {
    return;
}
// Key press buffer
// Stop Timer
window.clearInterval(timeoutID)
var c = String.fromCharCode(objEvent.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")&&(parseInt(appVersion)==4)) {
   document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
 else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) 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.form.theselect, 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['CompanyName']?>"><?php echo $row_RSturner1['CompanyName']?></option>
   <?php
} while ($row_RSturner1 = mysql_fetch_assoc($RSturner1));
 $rows = mysql_num_rows($RSturner1);
 if($rows > 0) {
     mysql_data_seek($RSturner1, 0);
  $row_RSturner1 = mysql_fetch_assoc($RSturner1);
 }

?>
 </select>
</div>
<br>
<br>
<font size="2" face="Courier New, Courier, mono">tlll</font>
</form>

</body>
</html>
<?php
mysql_free_result($RSturner1);
?>
Avatar of Zvonko
Zvonko
Flag of North Macedonia image

Hello charlie,

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

ASKER CERTIFIED SOLUTION
Avatar of Zvonko
Zvonko
Flag of North Macedonia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of charlieroker

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?