hello,
I found this really kool auto complete script that I want to use to replace my current <select> drop down, but the problem is that because it's jsut an auto complete it doesn't hold the same information that the <select> did.
like adding a value for ID, and other information,
I was using this:
PHP Code:
function DisplayDescription(selectIndex) {
var costArray=selectIndex.split("|");
document.firstForm.ProDescription.value = costArray[1];
document.firstForm.ProID.value = costArray[0];
}
to split the data and show the correct information to the user. as well as insert the ID into a hidden field.
so what I'm wondering is if there is a way to use both scripts, or rather, add this split function into the auto complete script.
function AutoCompleteDB()
{
// set the initial values.
this.bEnd = false;
this.nCount = 0;
this.aStr = new Object;
}
AutoCompleteDB.prototype.add = function(str)
{
// increment the count value.
this.nCount++;
// if at the end of the string, flag this node as an end point.
if ( str == "" )
this.bEnd = true;
else
{
// otherwise, pull the first letter off the string
var letter = str.substring(0,1);
var rest = str.substring(1,str.length);
// and either create a child node for it or reuse an old one.
if ( !this.aStr[letter] ) this.aStr[letter] = new AutoCompleteDB();
this.aStr[letter].add(rest);
}
}
AutoCompleteDB.prototype.getCount = function(str, bExact)
{
// if end of search string, return number
if ( str == "" )
if ( this.bEnd && bExact && (this.nCount == 1) ) return 0;
else return this.nCount;
// otherwise, pull the first letter off the string
var letter = str.substring(0,1);
var rest = str.substring(1,str.length);
// and look for case-insensitive matches
var nCount = 0;
var lLetter = letter.toLowerCase();
if ( this.aStr[lLetter] )
nCount += this.aStr[lLetter].getCount(rest, bExact && (letter == lLetter));
var uLetter = letter.toUpperCase();
if ( this.aStr[uLetter] )
nCount += this.aStr[uLetter].getCount(rest, bExact && (letter == uLetter));
return nCount;
}
AutoCompleteDB.prototype.getStrings = function(str1, str2, outStr)
{
if ( str1 == "" )
{
// add matching strings to the array
if ( this.bEnd )
outStr.push(str2);
// get strings for each child node
for ( var i in this.aStr )
this.aStr[i].getStrings(str1, str2 + i, outStr);
}
else
{
// pull the first letter off the string
var letter = str1.substring(0,1);
var rest = str1.substring(1,str1.length);
// and get the case-insensitive matches.
var lLetter = letter.toLowerCase();
if ( this.aStr[lLetter] )
this.aStr[lLetter].getStrings(rest, str2 + lLetter, outStr);
var uLetter = letter.toUpperCase();
if ( this.aStr[uLetter] )
this.aStr[uLetter].getStrings(rest, str2 + uLetter, outStr);
}
}
function AutoComplete(aStr, oText, oDiv, nMaxSize)
{
// initialize member variables
this.oText = oText;
this.oDiv = oDiv;
this.nMaxSize = nMaxSize;
// preprocess the texts for fast access
this.db = new AutoCompleteDB();
var i, n = aStr.length;
for ( i = 0; i < n; i++ )
{
this.db.add(aStr[i]);
}
// attach handlers to the text-box
oText.AutoComplete = this;
oText.onkeyup = AutoComplete.prototype.onTextChange;
oText.onblur = AutoComplete.prototype.onTextBlur;
}
AutoComplete.prototype.onchange = function()
{
var txt = this.oText.value;
// count the number of strings that match the text-box value
var nCount = this.db.getCount(txt, true);
// if a suitable number then show the popup-div
if ( (this.nMaxSize == -1 ) || ((nCount < this.nMaxSize) && (nCount > 0)) )
{
// clear the popup-div.
while ( this.oDiv.hasChildNodes() )
this.oDiv.removeChild(this.oDiv.firstChild);
// get all the matching strings from the AutoCompleteDB
var aStr = new Array();
this.db.getStrings(txt, "", aStr);
// add each string to the popup-div
var i, n = aStr.length;
for ( i = 0; i < n; i++ )
{
var oDiv = document.createElement('div');
this.oDiv.appendChild(oDiv);
oDiv.innerHTML = aStr[i];
oDiv.onmousedown = AutoComplete.prototype.onDivMouseDown;
oDiv.onmouseover = AutoComplete.prototype.onDivMouseOver;
oDiv.onmouseout = AutoComplete.prototype.onDivMouseOut;
oDiv.AutoComplete = this;
}
this.oDiv.style.visibility = "visible";
}
else // hide the popup-div
{
this.oDiv.innerHTML = "";
this.oDiv.style.visibility = "hidden";
}
}
hmm, that scripts not working at all for me,
but it's not really what I'm looking for either. the current script is nice,
all I want to do is split up the data, and when a selection is made, have the different split items appear if different fields. can this be done with the current script? sorry, javascript coding is still very new to me.
ok,
I'm now tring to use this autocomplete script, much simpler code, but I'm still having trouble getting it to split.
my code
PHP Code:
<script language=javascript>
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>
<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="1|Toronto|adam">adam
<OPTION VALUE="2|New York|george">george
<OPTION VALUE="3|North Bay|matt">matt
<OPTION VALUE="4|Hamilton|bill">bill
<OPTION VALUE="5|Barrie|greg">greg
<OPTION VALUE="6|Mississaga|bob">bob
<OPTION VALUE="7|Burlington|david">david
<OPTION VALUE="8|New Market|ryan">ryan
</SELECT>
</FORM>
what I'm trying to do it have the first and second values of the string inserted into they're own hidden text inputs, but no luck as of yet.
Before you post, read our: 
Auto Complete Script
