type ahead and autofill multiple fields

[jayscott1]

What I would like to do is have the user start typing in the last name
and as they were typing it would retrieve names from the database and
give a drop down like autosuggest in google. That much I have figured
out. But what I really want is once the name is in the field I would
like it to retrieve the rest of the information from the database ie.
firstname address etc. and put it other fields on the form. Is this
possible?

 

[Randy Webb]

(e-mail address removed) said the following on 9/1/2006 12:36 PM:

What I would like to do is have the user start typing in the last name
and as they were typing it would retrieve names from the database and
give a drop down like autosuggest in google. That much I have figured
out. But what I really want is once the name is in the field I would
like it to retrieve the rest of the information from the database ie.
firstname address etc. and put it other fields on the form. Is this
possible?

Yes.

 

[jayscott1]

(e-mail address removed) said the following on 9/1/2006 12:36 PM:

Yes.

Thanks Randy,

But how. I am able to do the autosuggest no problem and the fields do
fill in no problem either. But what is happening is when I use my
mouse to select from the autosuggest dropdown the other fields do not
update right away. I thought that if I use the onblur it would work.
In order for it to fill in the other fields I have to click on another
field and then come back to the autosuggest field and then click on
another field again. But if I don't use the mouse to select from the
dropdown it will work. What am I missing here.

Thanks,

Here is what I have so far;
------------------------The Form-------------------

<div class="row">
<span class="label">Client</span><span
class="formw"><table ><tr><td>Last Name</td><td>First
Name</td><td>Age</td><td>In Care</td><tr>
<td><label for="clientID">Client ID:</label></td>
<td><input name="clientID" id="clientID" size="5" maxlength="4"
onkeyup="ajax_showOptions(this,'getCountriesByLetters',event)"
onblur="initFormEvents();"></td>
<td><input name="firstname" id="firstname" size="20"
maxlength="255" onmousedown="initFormEvents1();" ></td>
<td><input name="lastname" id="lastname" size="20"
maxlength="255"></td>
<td><input name="address" id="address" size="20"
maxlength="255"></td>
<td><input name="zipCode" id="zipCode" size="4" maxlength="5"></td>
<td><input name="city" id="city" size="20" maxlength="255"></td>
<td><input name="country" id="country" size="20"
maxlength="255"></td>
</tr></table></span>
</div>

-------------------The Script to fill in the fields------------------

var ajax = new sack();
var currentClientID=false;
function getClientData()
{
var clientId =
document.getElementById('clientID').value.replace(/[^0-9]/g,'');
if(clientId.length==4 && clientId!=currentClientID){
currentClientID = clientId
ajax.requestFile = 'getClient.php?getClientId='+clientId; //
Specifying which file to get
ajax.onCompletion = showClientData; // Specify function that will be
executed after file has been found
ajax.runAJAX(); // Execute AJAX function

}

}

function showClientData()
{
var formObj = document.forms['form1'];
eval(ajax.response);
}


function initFormEvents()
{
document.getElementById('clientID').onblur = getClientData;
document.getElementById('clientID').focus();
}


------------------The auto suggest Script--------------------


var ajaxBox_offsetX = 0;
var ajaxBox_offsetY = 0;
var ajax_list_externalFile = 'ajax-list-countries.php'; // Path to
external file
var minimumLettersBeforeLookup = 1; // Number of letters entered
before a lookup is performed.

var ajax_list_objects = new Array();
var ajax_list_cachedLists = new Array();
var ajax_list_activeInput = false;
var ajax_list_activeItem;
var ajax_list_optionDivFirstItem = false;
var ajax_list_currentLetters = new Array();
var ajax_optionDiv = false;
var ajax_optionDiv_iframe = false;

var ajax_list_MSIE = false;
if(navigator.userAgent.indexOf('MSIE')>=0 &&
navigator.userAgent.indexOf('Opera')<0)ajax_list_MSIE=true;

function ajax_getTopPos(inputObj)
{

var returnValue = inputObj.offsetTop;
while((inputObj = inputObj.offsetParent) != null){
returnValue += inputObj.offsetTop;
}
return returnValue;
}
function ajax_list_cancelEvent()
{
return false;
}

function ajax_getLeftPos(inputObj)
{
var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null)returnValue +=
inputObj.offsetLeft;

return returnValue;
}

function ajax_option_setValue(e,inputObj)
{
if(!inputObj)inputObj=this;
var tmpValue = inputObj.innerHTML;
if(ajax_list_MSIE)tmpValue = inputObj.innerText;else tmpValue =
inputObj.textContent;
if(!tmpValue)tmpValue = inputObj.innerHTML;
ajax_list_activeInput.value = tmpValue;
if(document.getElementById(ajax_list_activeInput.name +
'_hidden'))document.getElementById(ajax_list_activeInput.name +
'_hidden').value = inputObj.id;
ajax_options_hide();
}

function ajax_options_hide()
{
ajax_optionDiv.style.display='none';
if(ajax_optionDiv_iframe)ajax_optionDiv_iframe.style.display='none';
}

function ajax_options_rollOverActiveItem(item,fromKeyBoard)
{
if(ajax_list_activeItem)ajax_list_activeItem.className='optionDiv';
item.className='optionDivSelected';
ajax_list_activeItem = item;

if(fromKeyBoard){
if(ajax_list_activeItem.offsetTop>ajax_optionDiv.offsetHeight){
ajax_optionDiv.scrollTop = ajax_list_activeItem.offsetTop -
ajax_optionDiv.offsetHeight + ajax_list_activeItem.offsetHeight + 2 ;
}
if(ajax_list_activeItem.offsetTop<ajax_optionDiv.scrollTop)
{
ajax_optionDiv.scrollTop = 0;
}
}
}

function ajax_option_list_buildList(letters,paramToExternalFile)
{

ajax_optionDiv.innerHTML = '';
ajax_list_activeItem = false;
if(ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()].length<=1){
ajax_options_hide();
return;
}



ajax_list_optionDivFirstItem = false;
var optionsAdded = false;
for(var
no=0;no<ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()].length;no++){
if(ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()][no].length==0)continue;
optionsAdded = true;
var div = document.createElement('DIV');
var items =
ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()][no].split(/###/gi);

if(ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()].length==1
&& ajax_list_activeInput.value == items[0]){
ajax_options_hide();
return;
}


div.innerHTML = items[items.length-1];
div.id = items[0];
div.className='optionDiv';
div.onmouseover = function(){
ajax_options_rollOverActiveItem(this,false) }
div.onclick = ajax_option_setValue;
if(!ajax_list_optionDivFirstItem)ajax_list_optionDivFirstItem = div;
ajax_optionDiv.appendChild(div);
}
if(optionsAdded){
ajax_optionDiv.style.display='block';
if(ajax_optionDiv_iframe)ajax_optionDiv_iframe.style.display='';
}

}

function
ajax_option_list_showContent(ajaxIndex,inputObj,paramToExternalFile)
{
var letters = inputObj.value;
var content = ajax_list_objects[ajaxIndex].response;
var elements = content.split('|');
ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()] =
elements;
ajax_option_list_buildList(letters,paramToExternalFile);

}

function ajax_option_resize(inputObj)
{
ajax_optionDiv.style.top = (ajax_getTopPos(inputObj) +
inputObj.offsetHeight + ajaxBox_offsetY) + 'px';
ajax_optionDiv.style.left = (ajax_getLeftPos(inputObj) +
ajaxBox_offsetX) + 'px';
if(ajax_optionDiv_iframe){
ajax_optionDiv_iframe.style.left = ajax_optionDiv.style.left;
ajax_optionDiv_iframe.style.top = ajax_optionDiv.style.top;
}

}

function ajax_showOptions(inputObj,paramToExternalFile,e)
{

if(e.keyCode==13 || e.keyCode==9)return;
if(ajax_list_currentLetters[inputObj.name]==inputObj.value)return;
if(!ajax_list_cachedLists[paramToExternalFile])ajax_list_cachedLists[paramToExternalFile]
= new Array();
ajax_list_currentLetters[inputObj.name] = inputObj.value;
if(!ajax_optionDiv){
ajax_optionDiv = document.createElement('DIV');
ajax_optionDiv.id = 'ajax_listOfOptions';
document.body.appendChild(ajax_optionDiv);

if(ajax_list_MSIE){
ajax_optionDiv_iframe = document.createElement('IFRAME');
ajax_optionDiv_iframe.border='0';
ajax_optionDiv_iframe.style.width = ajax_optionDiv.clientWidth +
'px';
ajax_optionDiv_iframe.style.height = ajax_optionDiv.clientHeight +
'px';
ajax_optionDiv_iframe.id = 'ajax_listOfOptions_iframe';

document.body.appendChild(ajax_optionDiv_iframe);
}

var allInputs = document.getElementsByTagName('INPUT');
for(var no=0;no<allInputs.length;no++){
if(!allInputs[no].onkeyup)allInputs[no].onfocus =
ajax_options_hide;
}
var allSelects = document.getElementsByTagName('SELECT');
for(var no=0;no<allSelects.length;no++){
allSelects[no].onfocus = ajax_options_hide;
}

var oldonkeydown=document.body.onkeydown;
if(typeof oldonkeydown!='function'){
document.body.onkeydown=ajax_option_keyNavigation;
}else{
document.body.onkeydown=function(){
oldonkeydown();
ajax_option_keyNavigation() ;}
}
var oldonresize=document.body.onresize;
if(typeof oldonresize!='function'){
document.body.onresize=function() {ajax_option_resize(inputObj); };
}else{
document.body.onresize=function(){oldonresize();
ajax_option_resize(inputObj) ;}
}


}

if(inputObj.value.length<minimumLettersBeforeLookup){
ajax_options_hide();
return;
}


ajax_optionDiv.style.top = (ajax_getTopPos(inputObj) +
inputObj.offsetHeight + ajaxBox_offsetY) + 'px';
ajax_optionDiv.style.left = (ajax_getLeftPos(inputObj) +
ajaxBox_offsetX) + 'px';
if(ajax_optionDiv_iframe){
ajax_optionDiv_iframe.style.left = ajax_optionDiv.style.left;
ajax_optionDiv_iframe.style.top = ajax_optionDiv.style.top;
}

ajax_list_activeInput = inputObj;
ajax_optionDiv.onselectstart = ajax_list_cancelEvent;

if(ajax_list_cachedLists[paramToExternalFile][inputObj.value.toLowerCase()]){
ajax_option_list_buildList(inputObj.value,paramToExternalFile);
}else{
ajax_optionDiv.innerHTML = '';
var ajaxIndex = ajax_list_objects.length;
ajax_list_objects[ajaxIndex] = new sack();
var url = ajax_list_externalFile + '?' + paramToExternalFile +
'=1&letters=' + inputObj.value.replace(" ","+");
ajax_list_objects[ajaxIndex].requestFile = url; // Specifying which
file to get
ajax_list_objects[ajaxIndex].onCompletion = function(){
ajax_option_list_showContent(ajaxIndex,inputObj,paramToExternalFile);
}; // Specify function that will be executed after file has been found
ajax_list_objects[ajaxIndex].runAJAX(); // Execute AJAX function
}
}

function ajax_option_keyNavigation(e)
{
if(document.all)e = event;

if(!ajax_optionDiv)return;
if(ajax_optionDiv.style.display=='none')return;

if(e.keyCode==38){ // Up arrow
if(!ajax_list_activeItem)return;
if(ajax_list_activeItem &&
!ajax_list_activeItem.previousSibling)return;
ajax_options_rollOverActiveItem(ajax_list_activeItem.previousSibling,true);
}

if(e.keyCode==40){ // Down arrow
if(!ajax_list_activeItem){
ajax_options_rollOverActiveItem(ajax_list_optionDivFirstItem,true);
}else{
if(!ajax_list_activeItem.nextSibling)return;
ajax_options_rollOverActiveItem(ajax_list_activeItem.nextSibling,true);
}
}

if(e.keyCode==13 || e.keyCode==9){ // Enter key or tab key
if(ajax_list_activeItem &&
ajax_list_activeItem.className=='optionDivSelected')ajax_option_setValue(false,ajax_list_activeItem);
if(e.keyCode==13)return false; else return true;
}
if(e.keyCode==27){ // Escape key
ajax_options_hide();
}
}

 

[Randy Webb]

(e-mail address removed) said the following on 9/1/2006 1:03 PM:

Thanks Randy,

But how. I am able to do the autosuggest no problem and the fields do
fill in no problem either. But what is happening is when I use my
mouse to select from the autosuggest dropdown the other fields do not
update right away. I thought that if I use the onblur it would work.
In order for it to fill in the other fields I have to click on another
field and then come back to the autosuggest field and then click on
another field again. But if I don't use the mouse to select from the
dropdown it will work. What am I missing here.

Without the back-end for testing, I can only guess. But, I didn't see
anywhere in your ajax_showOptions function (anywhere in the code at all
actually) where you are setting focus back to the input after it
auto-fills. So the onblur for it never gets fired until you go to
another focus, come back, and then leave.

At the point where the user chooses an AJAX filled option, set focus to
the input. Then when you click out, or tab out, the focus will be lost
and fire the onblur event.

Input has focus
Autosuggest box updates, user clicks that box.
On that click, the input has lost focus.
Input gets filled.
You click another textbox.

The input didn't have focus to get the blur event triggered so you have
to focus it again then blur it.

 

[jayscott1]

I seems so simple now. Thanks for that. I totally missed it. I
placed the setfocus in after the selection and it works like a charm.