?
Solved

Autocomplete  / Type-aheadscripting, from drop down box.

Posted on 2003-03-04
22
Medium Priority
?
602 Views
Last Modified: 2013-12-03
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.

BUT
 What I really need is a to be able to type directly into the drop down box and rathe than the text field first.  Is this possibe?

 Info for the drop down is gathered from a MYSQL database.  

I am using java script to complete the box.  I have searched high and low to be able to do this is it so easy no-one is doing it?

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'); ?>
<?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);
?>
0
Comment
Question by:charlieroker
[X]
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
  • 9
  • 5
  • 3
  • +2
22 Comments
 

Expert Comment

by:philcartmell
ID: 8063857
I don't think what you are wanting to do is possible using JavaScript - The HTML and JavaScript DOM can't just be hacked and changed to suit.

I suspect a way to do this would be using DHTML/Layers etc to make the apperance of a <select> - while it is actually a <text> box which some fancy layers and JavaScript.

Also, JScript and JavaScript are difference - dont get confused :)

Cheers

Phil
0
 
LVL 14

Expert Comment

by:avner
ID: 8063973
Try this :

<HTML>
<HEAD>
     <TITLE>JavaScript Toolbox - Auto-Complete</TITLE>
<script>
function autoComplete (field, select, property, forcematch) {
     var found = false;
     for (var i = 0; i < select.options.length; i++) {
     if (select.options[i][property].toUpperCase().indexOf(field.value.toUpperCase()) == 0) {
          found=true; break;
          }
     }
     if (found) { select.selectedIndex = i; }
     else { select.selectedIndex = -1; }
     if (field.createTextRange) {
          if (forcematch && !found) {
               field.value=field.value.substring(0,field.value.length-1);
               return;
               }
          var cursorKeys ="8;46;37;38;39;40;33;34;35;36;45;";
          if (cursorKeys.indexOf(event.keyCode+";") == -1) {
               var r1 = field.createTextRange();
               var oldValue = r1.text;
               var newValue = found ? select.options[i][property] : oldValue;
               if (newValue != field.value) {
                    field.value = newValue;
                    var rNew = field.createTextRange();
                    rNew.moveStart('character', oldValue.length) ;
                    rNew.select();
                    }
               }
          }
     }

</script>
</HEAD>
<BODY BGCOLOR=#FFFFFF LINK="#00615F" VLINK="#00615F" ALINK="#00615F">
<FORM>

<B>Auto-Complete</B><BR>
Start typing a name in the input box that matches a name in the drop-down...<BR>
<INPUT TYPE="text" NAME="input1" VALUE="" ONKEYUP="autoComplete(this,this.form.options,'value',true)">
<SELECT NAME="options"
onChange="this.form.input1.value=this.options[this.selectedIndex].value">
     <OPTION VALUE="adam">adam
     <OPTION VALUE="george">george
     <OPTION VALUE="matt">matt
     <OPTION VALUE="bill">bill
     <OPTION VALUE="greg">greg
     <OPTION VALUE="bob">bob
     <OPTION VALUE="david">david
     <OPTION VALUE="ryan">ryan
</SELECT>

</FORM>

</BODY>
</HTML>
0
 

Expert Comment

by:philcartmell
ID: 8063997
As outlined in my previous post typing directly into a HTML <select> would be impossible.

You would need to use DHTML/JavaScript to do this - and it would probably be more trouble than its worth making the code cross browser friendly.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:charlieroker
ID: 8064290
Phil,

I only need it to work from within IE as it is an internal website.  Secondly as I'm a bit of a newbie to this could you explain in a little more detail what you mean.

Avner,

Again, I have to type into a box first using your code.  I want to be able to type more than one letter in the drop down it will continue to autocomplete.  I have adjusted you code to include more 'da' names.  but if I type 'd' then 'a' it takes me back to adam.  

I need to type in the drop down and get rid of the text box.

<HTML>
<HEAD>
    <TITLE>JavaScript Toolbox - Auto-Complete</TITLE>
<script>
function autoComplete (field, select, property, forcematch) {
    var found = false;
    for (var i = 0; i < select.options.length; i++) {
    if (select.options[i][property].toUpperCase().indexOf(field.value.toUpperCase()) == 0) {
         found=true; break;
         }
    }
    if (found) { select.selectedIndex = i; }
    else { select.selectedIndex = -1; }
    if (field.createTextRange) {
         if (forcematch && !found) {
              field.value=field.value.substring(0,field.value.length-1);
              return;
              }
         var cursorKeys ="8;46;37;38;39;40;33;34;35;36;45;";
         if (cursorKeys.indexOf(event.keyCode+";") == -1) {
              var r1 = field.createTextRange();
              var oldValue = r1.text;
              var newValue = found ? select.options[i][property] : oldValue;
              if (newValue != field.value) {
                   field.value = newValue;
                   var rNew = field.createTextRange();
                   rNew.moveStart('character', oldValue.length) ;
                   rNew.select();
                   }
              }
         }
    }

</script>
</HEAD>
<BODY BGCOLOR=#FFFFFF LINK="#00615F" VLINK="#00615F" ALINK="#00615F">
<FORM>

<B>Auto-Complete</B><BR>
Start typing a name in the input box that matches a name in the drop-down...<BR>
<INPUT TYPE="text" NAME="input1" VALUE="" ONKEYUP="autoComplete(this,this.form.options,'value',true)">
<SELECT NAME="options"
onChange="this.form.input1.value=this.options[this.selectedIndex].value">
    <OPTION VALUE="adam">adam
    <OPTION VALUE="george">george
    <OPTION VALUE="matt">matt
    <OPTION VALUE="bill">bill
    <OPTION VALUE="greg">greg
    <OPTION VALUE="bob">bob
    <OPTION VALUE="david">david
     <OPTION VALUE="davies">davies
     <OPTION VALUE="dave">dave
     <OPTION VALUE="daniel">daniel
     <OPTION VALUE="danielle">danielle
    <OPTION VALUE="ryan">ryan
</SELECT>

</FORM>

</BODY>
</HTML>
0
 
LVL 14

Accepted Solution

by:
avner earned 1600 total points
ID: 8064302
Ok then you need this :

<HEAD>
<SCRIPT LANGUAGE="JAVASCRIPT">
//COPYRIGHT (C) Avner Cohen avcoh@yahoo.com
//A procedure to allow smart finding of elements inside a currency field,
// Set timer so that after 2000 miliseconds, the finder will be reset;
function smartOptionFinder(oSelect, oEvent)
{
var sKeyCode = oEvent.keyCode;
var sToChar = String.fromCharCode(sKeyCode);
if  (sKeyCode >47 && sKeyCode<91)
            {
            var sNow = new Date().getTime();
            if (oSelect.getAttribute("finder") == null)
                  {
                        oSelect.setAttribute("finder", sToChar.toUpperCase())
                        oSelect.setAttribute("timer", sNow)
                  }
            else if( sNow > parseInt(oSelect.getAttribute("timer"))+2000) //Rest all;
                  {
                        oSelect.setAttribute("finder", sToChar.toUpperCase())
                        oSelect.setAttribute("timer", sNow) //reset timer;
                  }
            else
                  {
                        oSelect.setAttribute("finder", oSelect.getAttribute("finder")+sToChar.toUpperCase())
                              oSelect.setAttribute("timer", sNow); //update timer;
                  }
                  var sFinder =  oSelect.getAttribute("finder");
                  var arrOpt = oSelect.options
                  var iLen = arrOpt.length
                        for (var i = 0; i < iLen ; i++)
                              {
                              sTest  = arrOpt[i].text;
                              if (sTest.toUpperCase().indexOf(sFinder) == 0)
                                    {
                                          arrOpt[i].selected = true;
                                          break;
                                    }
                              }          
                  event.returnValue = false;
            }
      else
      {
            //Not a digit;
      }

}

</SCRIPT>

</HEAD>
<BODY bgColor=Silver>

<select onkeydown="smartOptionFinder(this,event)">
<OPTION VALUE=""></OPTION><OPTION VALUE="AED" DEC="2">AED</OPTION>
<OPTION VALUE="AFA" DEC="2">AFA</OPTION>
<OPTION VALUE="ALL" DEC="2">ALL</OPTION>
<OPTION VALUE="ANG" DEC="2">ANG</OPTION>
<OPTION VALUE="ARS" DEC="2">ARS</OPTION>
<OPTION VALUE="AUD" DEC="2">AUD</OPTION>
<OPTION VALUE="AWG" DEC="2">AWG</OPTION>
<OPTION VALUE="AZM" DEC="2">AZM</OPTION>
<OPTION VALUE="BBD" DEC="2">BBD</OPTION>
<OPTION VALUE="BDT" DEC="2">BDT</OPTION>
<OPTION VALUE="BGN" DEC="2">BGN</OPTION>
<OPTION VALUE="BHD" DEC="3">BHD</OPTION>
<OPTION VALUE="BIF" DEC="0">BIF</OPTION>
<OPTION VALUE="BMD" DEC="2">BMD</OPTION>
<OPTION VALUE="BND" DEC="2">BND</OPTION>
<OPTION VALUE="BOB" DEC="2">BOB</OPTION>
<OPTION VALUE="BRC" DEC="2">BRC</OPTION>
<OPTION VALUE="BRL" DEC="2">BRL</OPTION>
<OPTION VALUE="BSD" DEC="2">BSD</OPTION>
<OPTION VALUE="BTN" DEC="2">BTN</OPTION>
<OPTION VALUE="BWP" DEC="2">BWP</OPTION>
<OPTION VALUE="BYB" DEC="0">BYB</OPTION>
<OPTION VALUE="BZD" DEC="2">BZD</OPTION>
<OPTION VALUE="CAD" DEC="2">CAD</OPTION>
<OPTION VALUE="CDF" DEC="2">CDF</OPTION>
<OPTION VALUE="CHF" DEC="2">CHF</OPTION>
<OPTION VALUE="CLF" DEC="0">CLF</OPTION>
<OPTION VALUE="CLP" DEC="0">CLP</OPTION>
<OPTION VALUE="CNY" DEC="2">CNY</OPTION>
<OPTION VALUE="COP" DEC="2">COP</OPTION>
<OPTION VALUE="CRC" DEC="2">CRC</OPTION>
<OPTION VALUE="CVE" DEC="2">CVE</OPTION>
<OPTION VALUE="CYP" DEC="2">CYP</OPTION>
<OPTION VALUE="CZK" DEC="2">CZK</OPTION>
<OPTION VALUE="DJF" DEC="0">DJF</OPTION>
<OPTION VALUE="DKK" DEC="2">DKK</OPTION>
<OPTION VALUE="DOP" DEC="2">DOP</OPTION>
<OPTION VALUE="DZD" DEC="2">DZD</OPTION>
<OPTION VALUE="ECS" DEC="0">ECS</OPTION>
<OPTION VALUE="EEK" DEC="2">EEK</OPTION>
<OPTION VALUE="EGP" DEC="2">EGP</OPTION>
<OPTION VALUE="ERN" DEC="2">ERN</OPTION>
<OPTION VALUE="ETB" DEC="2">ETB</OPTION>
<OPTION VALUE="EUR" DEC="2">EUR</OPTION>
<OPTION VALUE="FJD" DEC="2">FJD</OPTION>
<OPTION VALUE="GBP" DEC="2">GBP</OPTION>
<OPTION VALUE="GEL" DEC="2">GEL</OPTION>
<OPTION VALUE="GHC" DEC="2">GHC</OPTION>
<OPTION VALUE="GIP" DEC="2">GIP</OPTION>
<OPTION VALUE="GMD" DEC="2">GMD</OPTION>
<OPTION VALUE="GNF" DEC="0">GNF</OPTION>
<OPTION VALUE="GTQ" DEC="2">GTQ</OPTION>
<OPTION VALUE="GWP" DEC="2">GWP</OPTION>
<OPTION VALUE="GYD" DEC="2">GYD</OPTION>
<OPTION VALUE="HKD" DEC="2">HKD</OPTION>
<OPTION VALUE="HNL" DEC="2">HNL</OPTION>
<OPTION VALUE="HRK" DEC="2">HRK</OPTION>
<OPTION VALUE="HTG" DEC="2">HTG</OPTION>
<OPTION VALUE="HUF" DEC="2">HUF</OPTION>
<OPTION VALUE="IDR" DEC="2">IDR</OPTION>
<OPTION VALUE="ILS" DEC="2">ILS</OPTION>
<OPTION VALUE="INR" DEC="2">INR</OPTION>
<OPTION VALUE="IRR" DEC="2">IRR</OPTION>
<OPTION VALUE="ISK" DEC="2">ISK</OPTION>
<OPTION VALUE="JMD" DEC="2">JMD</OPTION>
<OPTION VALUE="JOD" DEC="3">JOD</OPTION>
<OPTION VALUE="JPY" DEC="0">JPY</OPTION>
<OPTION VALUE="KES" DEC="2">KES</OPTION>
<OPTION VALUE="KMF" DEC="0">KMF</OPTION>
<OPTION VALUE="KRW" DEC="0">KRW</OPTION>
<OPTION VALUE="KWD" DEC="3">KWD</OPTION>
<OPTION VALUE="KYD" DEC="2">KYD</OPTION>
<OPTION VALUE="KZT" DEC="2">KZT</OPTION>
<OPTION VALUE="LAK" DEC="2">LAK</OPTION>
<OPTION VALUE="LBP" DEC="2">LBP</OPTION>
<OPTION VALUE="LKR" DEC="2">LKR</OPTION>
<OPTION VALUE="LRD" DEC="2">LRD</OPTION>
<OPTION VALUE="LSL" DEC="2">LSL</OPTION>
<OPTION VALUE="LTL" DEC="2">LTL</OPTION>
<OPTION VALUE="LVL" DEC="2">LVL</OPTION>
<OPTION VALUE="LYD" DEC="3">LYD</OPTION>
<OPTION VALUE="MAD" DEC="2">MAD</OPTION>
<OPTION VALUE="MDL" DEC="2">MDL</OPTION>
<OPTION VALUE="MGF" DEC="0">MGF</OPTION>
<OPTION VALUE="MKD" DEC="2">MKD</OPTION>
<OPTION VALUE="MMK" DEC="2">MMK</OPTION>
<OPTION VALUE="MOP" DEC="2">MOP</OPTION>
<OPTION VALUE="MRO" DEC="2">MRO</OPTION>
<OPTION VALUE="MTL" DEC="2">MTL</OPTION>
<OPTION VALUE="MUR" DEC="2">MUR</OPTION>
<OPTION VALUE="MWK" DEC="2">MWK</OPTION>
<OPTION VALUE="MXN" DEC="2">MXN</OPTION>
<OPTION VALUE="MYR" DEC="2">MYR</OPTION>
<OPTION VALUE="MZM" DEC="2">MZM</OPTION>
<OPTION VALUE="NAD" DEC="2">NAD</OPTION>
<OPTION VALUE="NGN" DEC="2">NGN</OPTION>
<OPTION VALUE="NIO" DEC="2">NIO</OPTION>
<OPTION VALUE="NOK" DEC="2">NOK</OPTION>
<OPTION VALUE="NPR" DEC="2">NPR</OPTION>
<OPTION VALUE="NZD" DEC="2">NZD</OPTION>
<OPTION VALUE="OMR" DEC="3">OMR</OPTION>
<OPTION VALUE="PAB" DEC="2">PAB</OPTION>
<OPTION VALUE="PEN" DEC="2">PEN</OPTION>
<OPTION VALUE="PGK" DEC="2">PGK</OPTION>
<OPTION VALUE="PHP" DEC="2">PHP</OPTION>
<OPTION VALUE="PKR" DEC="2">PKR</OPTION>
<OPTION VALUE="PLN" DEC="2">PLN</OPTION>
<OPTION VALUE="PYG" DEC="0">PYG</OPTION>
<OPTION VALUE="QAR" DEC="2">QAR</OPTION>
<OPTION VALUE="ROL" DEC="2">ROL</OPTION>
<OPTION VALUE="RUB" DEC="2">RUB</OPTION>
<OPTION VALUE="RUR" DEC="2">RUR</OPTION>
<OPTION VALUE="RWF" DEC="0">RWF</OPTION>
<OPTION VALUE="SAR" DEC="2">SAR</OPTION>
<OPTION VALUE="SBD" DEC="2">SBD</OPTION>
<OPTION VALUE="SCR" DEC="2">SCR</OPTION>
<OPTION VALUE="SDD" DEC="2">SDD</OPTION>
<OPTION VALUE="SEK" DEC="2">SEK</OPTION>
<OPTION VALUE="SGD" DEC="2">SGD</OPTION>
<OPTION VALUE="SIT" DEC="2">SIT</OPTION>
<OPTION VALUE="SKK" DEC="2">SKK</OPTION>
<OPTION VALUE="SLL" DEC="2">SLL</OPTION>
<OPTION VALUE="SOS" DEC="2">SOS</OPTION>
<OPTION VALUE="SRG" DEC="2">SRG</OPTION>
<OPTION VALUE="STD" DEC="2">STD</OPTION>
<OPTION VALUE="SVC" DEC="2">SVC</OPTION>
<OPTION VALUE="SZL" DEC="2">SZL</OPTION>
<OPTION VALUE="THB" DEC="2">THB</OPTION>
<OPTION VALUE="TMM" DEC="2">TMM</OPTION>
<OPTION VALUE="TND" DEC="3">TND</OPTION>
<OPTION VALUE="TOP" DEC="2">TOP</OPTION>
<OPTION VALUE="TRK" DEC="0">TRK</OPTION>
<OPTION VALUE="TRL" DEC="0">TRL</OPTION>
<OPTION VALUE="TTD" DEC="2">TTD</OPTION>
<OPTION VALUE="TWD" DEC="2">TWD</OPTION>
<OPTION VALUE="TZS" DEC="2">TZS</OPTION>
<OPTION VALUE="UAH" DEC="2">UAH</OPTION>
<OPTION VALUE="UGX" DEC="0">UGX</OPTION>
<OPTION VALUE="USD" DEC="2">USD</OPTION>
<OPTION VALUE="UYU" DEC="2">UYU</OPTION>
<OPTION VALUE="UZS" DEC="2">UZS</OPTION>
<OPTION VALUE="VEB" DEC="2">VEB</OPTION>
<OPTION VALUE="VND" DEC="2">VND</OPTION>
<OPTION VALUE="VUV" DEC="0">VUV</OPTION>
<OPTION VALUE="WST" DEC="2">WST</OPTION>
<OPTION VALUE="XAF" DEC="0">XAF</OPTION>
<OPTION VALUE="XAG" DEC="5">XAG</OPTION>
<OPTION VALUE="XAU" DEC="5">XAU</OPTION>
<OPTION VALUE="XCD" DEC="2">XCD</OPTION>
<OPTION VALUE="XDR" DEC="5">XDR</OPTION>
<OPTION VALUE="XOF" DEC="0">XOF</OPTION>
<OPTION VALUE="XPF" DEC="0">XPF</OPTION>
<OPTION VALUE="YER" DEC="2">YER</OPTION>
<OPTION VALUE="YUM" DEC="2">YUM</OPTION>
<OPTION VALUE="ZAL" DEC="0">ZAL</OPTION>
<OPTION VALUE="ZAR" DEC="2">ZAR</OPTION>
<OPTION VALUE="ZMK" DEC="2">ZMK</OPTION>
<OPTION VALUE="ZRN" DEC="2">ZRN</OPTION>
<OPTION VALUE="ZWD" DEC="2">ZWD</OPTION>
</select>
</BODY>

</HTML>
0
 
LVL 3

Expert Comment

by:bjrcreations
ID: 8065425
Can I ask a fairly straightforward question: how is having this functionality useful in your application? I would be interested in knowing if what you are trying to accomplish couldn't be done in a simpler manner.
0
 
LVL 2

Expert Comment

by:memerot
ID: 8065751
Am I missing something?  I agree with bjcreations.

Use a basic select.  Make sure the first option line is a blank line.  Type 'S'.  What happens?  It goes to the first S - right?  This is HTML.  That's what HTML does, and all it does.  If your users want something more, write a executable app or something where it is so much easier to do this kind of thing.  It's dead simple in Access.  If your users are used to the web, they're used to this interface though.  I live in Maryland - any web form that lists the states I type in M and it defaults to Maine, I hit the down arrow once and I'm on Maryland.  How hard is that?  
0
 

Expert Comment

by:philcartmell
ID: 8065778
I agree entirely with memerot - this is HTML. It is what x millions of people around the world are used to.

It would be more hassle than its worth to do this in javascript/dhtml - I suspect you are over-engineering a small part of your project that can be handled in an entirely different way.
0
 
LVL 1

Author Comment

by:charlieroker
ID: 8066028
Phil and Memerot, you may be right in thinking that it could be done in an easier fashion.  I am entirely open to any new ideas.  The problem is that I will be using this in many places within my database.  The users wnat the same functionality that they currently have.  They are using Lotus Approach at the moment.  The other problem is that we are a food wholesaler, now I entirely agree with you on the down arrow solution, for our customers portion we only have 651, but in the products portion we have in the region of 10000.  and here I think it is unreasonable to make them hit the down arrow 130 times (approx average)until they find the right product.  Over engeineered it might be, but I would like it done if it is poss :).  I know it will work with the empty text box to complete the drop down, but for tidyness I would like the drop down to work.

I hope that clarifies things.  Any comments are very gratefully received as I'm working in a company where I'm the only tech guy and I have to use a 56k modem to get on the net.  Should give some idea what I'm up against.
0
 

Expert Comment

by:philcartmell
ID: 8066067
Thanks for the response charlie.

How about doing a master browser/detail type solution.

Where the user sticks in some search criteria into a popup window - php/mysql goes away and returns all the results below - then the user selects the relevant product and javascripts pops it into the previous window (the one below the popup) in the appropriate area.

This is pretty standard practice in the world of Oracle (my background) and Oracle Forms and works well.

Would be pretty simply to develop, just a case of using frames, php, javascript and mysql.
0
 
LVL 1

Author Comment

by:charlieroker
ID: 8066201
Thank you for all you help.  If you are interested I have made it work, using the code supplied by avner and adding it to my php page.  

I'm still learnging here and am very grateful for all solutions/help.  Next posting to EE in next few days probably when I get stuck again!!!!!


Using a database called turner, and a recordset called RSTurner1:

<?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);
?>
<HEAD>
<SCRIPT LANGUAGE="JAVASCRIPT">
//COPYRIGHT (C) Avner Cohen avcoh@yahoo.com
//A procedure to allow smart finding of elements inside a currency field,
// Set timer so that after 2000 miliseconds, the finder will be reset;
function smartOptionFinder(oSelect, oEvent)
{
var sKeyCode = oEvent.keyCode;
var sToChar = String.fromCharCode(sKeyCode);
if  (sKeyCode >47 && sKeyCode<91)
          {
          var sNow = new Date().getTime();
          if (oSelect.getAttribute("finder") == null)
               {
                    oSelect.setAttribute("finder", sToChar.toUpperCase())
                    oSelect.setAttribute("timer", sNow)
               }
          else if( sNow > parseInt(oSelect.getAttribute("timer"))+400) //Rest all;
               {
                    oSelect.setAttribute("finder", sToChar.toUpperCase())
                    oSelect.setAttribute("timer", sNow) //reset timer;
               }
          else
               {
                    oSelect.setAttribute("finder", oSelect.getAttribute("finder")+sToChar.toUpperCase())
                         oSelect.setAttribute("timer", sNow); //update timer;
               }
               var sFinder =  oSelect.getAttribute("finder");
               var arrOpt = oSelect.options
               var iLen = arrOpt.length
                    for (var i = 0; i < iLen ; i++)
                         {
                         sTest  = arrOpt[i].text;
                         if (sTest.toUpperCase().indexOf(sFinder) == 0)
                              {
                                   arrOpt[i].selected = true;
                                   break;
                              }
                         }          
               event.returnValue = false;
          }
     else
     {
          //Not a digit;
     }

}

</SCRIPT>

</HEAD>
<BODY bgColor=Silver>

<select onkeydown="smartOptionFinder(this,event)" id="select" name="theselect">

    <?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>


</body>
</html>
<?php
mysql_free_result($RSturner1);
?>
</select>
</BODY>

</HTML>
0
 
LVL 3

Expert Comment

by:bjrcreations
ID: 8066219
I agree with philcartmell on this one. His idea is probably the easiest to implement. The only problem, is what if they don't know the exact name of the customer or product? Having that all pre-populated in a drop-down allows them to browse through without actually knowing what they want.

One other suggestion: explain to the users who use this application, that it simply is not going to work like Lotus Approach. Web applications mimic desktop applications only in so much as the data they output. You can get the functionality to match close, but almost never exact. The best advantage of having this in a web application is the ease of accessibility (any computer with an Internet connection).
0
 
LVL 1

Author Comment

by:charlieroker
ID: 8066228
Thank you for all you help.  If you are interested I have made it work, using the code supplied by avner and adding it to my php page.  

I'm still learnging here and am very grateful for all solutions/help.  Next posting to EE in next few days probably when I get stuck again!!!!!


Using a database called turner, and a recordset called RSTurner1:

<?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);
?>
<HEAD>
<SCRIPT LANGUAGE="JAVASCRIPT">
//COPYRIGHT (C) Avner Cohen avcoh@yahoo.com
//A procedure to allow smart finding of elements inside a currency field,
// Set timer so that after 2000 miliseconds, the finder will be reset;
function smartOptionFinder(oSelect, oEvent)
{
var sKeyCode = oEvent.keyCode;
var sToChar = String.fromCharCode(sKeyCode);
if  (sKeyCode >47 && sKeyCode<91)
          {
          var sNow = new Date().getTime();
          if (oSelect.getAttribute("finder") == null)
               {
                    oSelect.setAttribute("finder", sToChar.toUpperCase())
                    oSelect.setAttribute("timer", sNow)
               }
          else if( sNow > parseInt(oSelect.getAttribute("timer"))+400) //Rest all;
               {
                    oSelect.setAttribute("finder", sToChar.toUpperCase())
                    oSelect.setAttribute("timer", sNow) //reset timer;
               }
          else
               {
                    oSelect.setAttribute("finder", oSelect.getAttribute("finder")+sToChar.toUpperCase())
                         oSelect.setAttribute("timer", sNow); //update timer;
               }
               var sFinder =  oSelect.getAttribute("finder");
               var arrOpt = oSelect.options
               var iLen = arrOpt.length
                    for (var i = 0; i < iLen ; i++)
                         {
                         sTest  = arrOpt[i].text;
                         if (sTest.toUpperCase().indexOf(sFinder) == 0)
                              {
                                   arrOpt[i].selected = true;
                                   break;
                              }
                         }          
               event.returnValue = false;
          }
     else
     {
          //Not a digit;
     }

}

</SCRIPT>

</HEAD>
<BODY bgColor=Silver>

<select onkeydown="smartOptionFinder(this,event)" id="select" name="theselect">

    <?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>


</body>
</html>
<?php
mysql_free_result($RSturner1);
?>
</select>
</BODY>

</HTML>
0
 
LVL 3

Expert Comment

by:bjrcreations
ID: 8066229
I agree with philcartmell on this one. His idea is probably the easiest to implement. The only problem, is what if they don't know the exact name of the customer or product? Having that all pre-populated in a drop-down allows them to browse through without actually knowing what they want.

One other suggestion: explain to the users who use this application, that it simply is not going to work like Lotus Approach. Web applications mimic desktop applications only in so much as the data they output. You can get the functionality to match close, but almost never exact. The best advantage of having this in a web application is the ease of accessibility (any computer with an Internet connection).
0
 
LVL 1

Author Comment

by:charlieroker
ID: 8066266
The products need to be sought from a database though in order that I can process orders etc.  I have made it work as near as I think it is going to be, like you say it is not going to be the same as Lotus Approach, I know this and have explained this to them, but the nearer the better as I'm sure you understand.  Thank you all for help and advice.  they ouhght ot device a way of being able to split points.  But avner gave me the jscript that I used.  See previous posting for the answer.

Thanks again to you all.

C
0
 
LVL 1

Author Comment

by:charlieroker
ID: 8066279
Please view the rest of the question as although this is the accepted answer I had to modify the code to get it to work in PHP.  

AVNER you're a star.  Thank you
0
 
LVL 1

Author Comment

by:charlieroker
ID: 8066401
Avner,  one further query.  I have many companies called 'The something'  Is it possible to accept the spacebar as a character??if so where do I alter your code?

0
 

Expert Comment

by:philcartmell
ID: 8066446
for spacebar you will need to change:

if  (sKeyCode >47 && sKeyCode<91)

to:

if  ((sKeyCode >47 && sKeyCode<91) || sKeyCode==32)
0
 
LVL 1

Author Comment

by:charlieroker
ID: 8067335
Thanks phil.

can you explain for my (stupid) benefit why that works?

http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20538416.html

answer it here and I can give you some points.  


Thanks again

C
0
 
LVL 2

Expert Comment

by:memerot
ID: 8067685
Hey charlieroker

Be VERY SURE to test this will a full (10000 item) data set.  IE may take a very very long time to generate something that long, too long for it to be useful.  I had a problem with a 1200 item catalog taking an unusably long time to display - the server side generation only took 1 second, but IE took 30 seconds to display the page no matter whether I used table rows, line breaks, or what have you.
0
 
LVL 14

Expert Comment

by:avner
ID: 8069880
charlieroker , yeah, philcartmell suggested code is correct.
Anything else you need for this functionallity ?
0
 
LVL 1

Author Comment

by:charlieroker
ID: 8071032
No it is working as I want it now.

Thanks to all of you
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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)
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…
Suggested Courses

771 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