textarea select box 2

[glady]

Hello,
I was wondering is it possible to have a "textarea dropdown box". What I would like to do is pull in data from a query. Take that data and put it in a dropdown box. If there isn't an adequate entry in the drop down box for the user, I would like to allow the user to then add it to the dropdown box dynamically but all in the same box.

Am I totally off my rocker? My boss says he remembers seeing code that can make this happen but of course he can't find the code.

Thanks in advance for anyone's help!
P.

 

[LFI]

P.,

I created something recently that can "easily" be modified to do what you want. The "trouble" is that (1) it is too long to post here; and (2) I have only ever tested it in IE6.

It's fairly complicated and took me a while to create, but if you follow the ReadMe.txt file I wrote, you should be able to use it.

If you like, I can send it off to you (post your e-mail).

--Dave

P.S., there's probably an easier solution than mine, but I spent so long putting it together...!

 

[adam0101]

I also created something that does this, although it isn't quite finished. It includes a new event - add onNotInList="" to your select box to fire an event when the typed value is not an option of the drop-down. Watch out for word-wrapping of this code:

Contents of comboBox.js

var comboAll= false; // true = all select boxes; false = only select boxes with the attribute combo="combo"
var forceMatch= true; // true = typed value must exist in the drop-down on blur; false = any value accepted on blur.
var forceAutoMatch= false; // true = only allows values in the drop-down to be typed; false = any value accepted.


window.onload=initCbo;		// initalizes the script.
var f;
function initCbo(){
 if(document.layers){return false}
 var output='';
 for(var f=0;f<document.forms.length;f++){
  var s=document.forms[f].elements;
  for(var i=0;i<s.length;i++){
   if(s[i].type == 'select-one' && (s[i].combo=='combo' || comboAll==true)){
    output='';
    s[i].style.position='absolute';
    s[i].style.left=0;
    s[i].style.top=0;
//    s[i].style.width='100%';
    s[i].style.zIndex='1';
    s[i].style.clip='rect(auto,auto,auto,'+(s[i].clientWidth-19)+')';
    s[i].onfocus="window.clearTimeout(window.tmr"+s[i].name+")";
    s[i].onblur="checkInList(\'"+s[i].name+"\',this.form)";
    s[i].onchange='setTextBox(this,this.form)';
    output+='<input type="text" name="'+s[i].name+'Box" style="position: absolute; left:0px; top:0px; width: 100%; z-index: 2;clip:rect(auto,'+(s[i].clientWidth-19)+',auto,auto)" onblur="checkInList(\''+s[i].name+'\',this.form)" ONKEYUP="autoComplete(this,this.form(\''+s[i].name+'\'),\'text\')" onNotInList="'+s[i].onNotInList+'" value="'+s[i][s[i].selectedIndex].text+'">';
    output='<span style="position:relative">'+s[i].outerHTML+output+'</span>&nbsp;';
    s[i].outerHTML=output;
   }
  }
 }
}

function checkInList(listName,f){
 if(forceMatch){
  var found=false;
  var box=f[listName+"Box"];
  var list=f[listName];
  for(var i=0;i<list.length;i++){
    if(box.value==list[i].text || box.value==''){
      found=true;
      break;
    }
  }
  if(!found){
    window.f=f;
    eval("window.tmr"+listName+"=setTimeout(\"notInList('"+box.name+"')\",100)");
  }
 }
}
function notInList(box){
  alert('The value you typed could not be found in the list!');
  eval(f[box].onNotInList);
  f[box].select();
  f[box].focus();
}
function setTextBox(list,f){
  var box = f[list.name+"Box"]
  box.value=list[list.selectedIndex].text;
  box.select();
  box.focus();
}
function autoComplete (field, select, property) {
  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 (forceAutoMatch && !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();
      }
    }
  }
}

Example page:

<html>
<head>
<script language="JavaScript" src="comboBox.js"></script>
</head>
<body>
<form>
<select name="test" combo=combo>
  <option value="1">Apples
  <option value="2">Apricots
  <option value="3">Bananas
</select></form>
</body>
</html>

Adam
while(ignorance){perpetuate(violence,fear,hatred);life=life-1};

 

[glady]

thanks for the suggestions Dave and Adam. Adam I haven't had a chance to look at your code yet. It is my priority after finishing this thread.
Dave, I'd really like to see your code. My email is
pjg-at-legis.state.pa.us.

Thanks. I appreciate your help.
Pam

 

[marishka]

<<comboBox.js>>

adam,
I've been testing your script.. It works great (thanks!), but there's something else that I'd like it to do, and perhaps you would have some insight.. here is the link:

http://www.uscibooks.com/forms/BookAdoptions.php

when a value is typed in the textbox using autofill, I'd like it to be passed to the main frame, where the details for the selected professor should be displayed. You can what I am trying to reach by just selecting a professor from the drop-down box with your mouse. This part works fine, but the autofill function stops short of passing the values and displaying the details page. What gives? any ideas?
here is my script:

***************************************************
// AUTOFILL SCRIPT

// true = all select boxes; false = only select boxes with the attribute combo="combo"
var comboAll = false;

// true = typed value must exist in the drop-down on blur; false = any value accepted on blur.
var forceMatch = true;

// true = only allows values in the drop-down to be typed; false = any value accepted.
var forceAutoMatch = true;


// INITIALIZE THE SCRIPT
window.onload = initCbo;
var f;

// DROP DOWN LIST

function initCbo(){
if(document.layers){return false}
var output = '';
for(var f=0;f<document.forms.length;f++){
var s = document.forms[f].elements;
for(var i=0;i<s.length;i++){
if(s.type == 'select-one' && (s.combo=='combo' || comboAll==true)){

output = '';

s.style.height = '18px';
s.style.clip = 'rect(auto,auto,auto,'+(s.clientWidth-18)+')';

s.onChange = 'setTextBox(this,this.form)';

output +='<input type="text" name="'+s.name+'Box" value="'+s[s.selectedIndex].text+'" style="position: absolute; left: 291px; height: 18px; top:-5px; width: 210px; z-index: 2; clip:rect(auto,'+(s.clientWidth-18)+',auto,auto); font-size:11px;" onKeyUp="autoComplete(this,this.form(\''+s.name+'\'),\'text\')" onNotInList="'+s.onNotInList+'">';
output = '<span style="position:relative;">'+s.outerHTML+output+'</span>&nbsp;';
s.outerHTML = output;
}
}
}
}

// VALUE FOUND - PROCEED

function setTextBox(list,f){
var box = f[list.name+"Box"]
box.value = list[list.selectedIndex].text;
box.select();
box.focus();
ProfID = list.options[list.selectedIndex].value;
if(ProfID != "") {
parent.mainFrame.location.href = "frBookAdoptionsMain.php?flag=1&id="+ProfID;
}
}


// AUTO COMPLETE

function autoComplete (field, select, property) {
var found = false;
for (var i=0;i<select.options.length;i++) {
if(select.options[property].toUpperCase().indexOf(field.value.toUpperCase()) == 0) {
found = true;
break;
}
}
if (found) {
select.selectedIndex = i;
}

else { select.selectedIndex = -1; }
if (field.createTextRange) {
if (forceAutoMatch && !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[property] : oldValue;
if (newValue != field.value) {
field.value = newValue;
var rNew = field.createTextRange();
rNew.moveStart('character', oldValue.length) ;
rNew.select();
}
}
}
}

// END AUTOFILL