Autocomplete  / Type-aheadscripting, from drop down box.

Posted on 2003-02-28
Medium Priority
Last Modified: 2008-10-13
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>

Question by:charlieroker
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
LVL 63

Expert Comment

ID: 8043734
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,

LVL 63

Accepted Solution

Zvonko earned 1200 total points
ID: 8043761
I just tested your code with pseudo data and it worked without problem.

So what help and what ideas do you need now?


Author Comment

ID: 8063199

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

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

800 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question