Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 344
  • Last Modified:

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!!
( http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20433351.html)

Please see code below:

<?php require_once('Connections/turner.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);
<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){
   timeoutCtr = 0;
function findMatch(selectBox, txtFind, objEvent) {
if (txtFind == '' || objEvent.keyCode == 8) {
// Key press buffer
// Stop Timer
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();
    } else {
         if (s2 < s) {
              posHigh = posMid - 1;
         } else {
              posLow = posMid + 1;
if (!foundIt) {
    selectBox.selectedIndex = 0;

<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();
<style type="text/css">
.text {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #444444;
background-color: #FFEAEA;
<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">
do {  
   <option value="<?php echo $row_RSturner1['CompanyName']?>"><?php echo $row_RSturner1['CompanyName']?></option>
} 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);

<font size="2" face="Courier New, Courier, mono">tlll</font>

  • 2
1 Solution
ZvonkoSystems architectCommented:
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,

ZvonkoSystems architectCommented:
I just tested your code with pseudo data and it worked without problem.

So what help and what ideas do you need now?

charlierokerAuthor Commented:

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?


Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now