type ahead and autofill multiple fields

Discussion in 'Javascript' started by jayscott1, Sep 1, 2006.

  1. jayscott1

    jayscott1 Guest

    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?
     
    jayscott1, Sep 1, 2006
    #1
    1. Advertisements

  2. jayscott1

    Randy Webb Guest

    said the following on 9/1/2006 12:36 PM:
    Yes.
     
    Randy Webb, Sep 1, 2006
    #2
    1. Advertisements

  3. jayscott1

    jayscott1 Guest

    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();
    }
    }
     
    jayscott1, Sep 1, 2006
    #3
  4. jayscott1

    Randy Webb Guest

    said the following on 9/1/2006 1:03 PM:
    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.
     
    Randy Webb, Sep 1, 2006
    #4
  5. jayscott1

    jayscott1 Guest

    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.
     
    jayscott1, Sep 1, 2006
    #5
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.