Loading ...
Sorry, an error occurred while loading the content.
 

Re: Secondary Select with Auto Complete

Expand Messages
  • fcko9
    ... trying ... populate ... differn t ... absolute ... {width:100%;height:1.4em;z-index:0;} ...
    Message 1 of 10 , Mar 30, 2007
      --- In ydn-javascript@yahoogroups.com, "bdetarade"
      <benoit.de.tarade@...> wrote:
      >
      > --- In ydn-javascript@yahoogroups.com, "THECREW" <jim@> wrote:
      > >
      > > --- In ydn-javascript@yahoogroups.com, "bdetarade"
      > > <benoit.de.tarade@> wrote:
      > > >
      > > > --- In ydn-javascript@yahoogroups.com, "THECREW" <jim@> wrote:
      > > > >
      > > > > Below is a modification to the states array example. What I'm
      trying
      > > > > to figure out is once YAHOO.util.Event.addListener("statesinput",
      > > > > "blur", interceptLink);
      > > > > is triggered and inside interceptLink how can I get it to make a
      > call
      > > > > to a php file that will return a JSON result set that I can
      populate
      > > > > into a select field named testOption? I have tried several
      differn't
      > > > > ideas and they all have failed, can some one please give me some
      > > advise.
      > > > >
      > > > > Thanks
      > > > > Jim
      > > > >
      > > > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      > > > > "http://www.w3.org/TR/html4/strict.dtd">
      > > > >
      > > > > <html>
      > > > >
      > > > > <head>
      > > > >
      > > > > <title>AutoComplete Widget :: JS Array Example</title>
      > > > >
      > > > > <link type="text/css" rel="stylesheet"
      > > > href="../../build/reset/reset.css">
      > > > > <link type="text/css" rel="stylesheet"
      > > > href="../../build/fonts/fonts.css">
      > > > > <link type="text/css" rel="stylesheet"
      > > > > href="../../build/logger/assets/logger.css">
      > > > > <link type="text/css" rel="stylesheet" href="./css/examples.css">
      > > > > <link type="text/css" rel="stylesheet"
      > > > > href="../../docs/assets/dpSyntaxHighlighter.css">
      > > > >
      > > > > <style type="text/css">
      > > > > #statesmod {position:relative;}
      > > > > #statesautocomplete, #statesautocomplete2
      > > > > {position:relative;width:15em;margin-bottom:1em;}/* set width of
      > > > > widget here*/
      > > > > #statesautocomplete {z-index:9000} /* for IE z-index of
      absolute
      > > > > divs inside relative divs issue */
      > > > > #statesinput, #statesinput2
      {width:100%;height:1.4em;z-index:0;}
      > > > > #statescontainer, #statescontainer2
      > > > > {position:absolute;top:1.7em;width:100%}
      > > > > #statescontainer .yui-ac-content, #statescontainer2
      > > > > .yui-ac-content {position:absolute;width:100%;border:1px solid
      > > > > #404040;background:#fff;overflow:hidden;z-index:9050;}
      > > > > #statescontainer .yui-ac-shadow, #statescontainer2
      > .yui-ac-shadow
      > > > >
      > > >
      > >
      >
      {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
      > > > > #statescontainer ul, #statescontainer2 ul {padding:5px
      > > > 0;width:100%;}
      > > > > #statescontainer li, #statescontainer2 li {padding:0
      > > > > 5px;cursor:default;white-space:nowrap;}
      > > > > #statescontainer li.yui-ac-highlight, #statescontainer2
      > > > > li.yui-ac-highlight {background:#ff0;}
      > > > > #statescontainer li.yui-ac-prehighlight,#statescontainer2
      > > > > li.yui-ac-prehighlight {background:#FFFFCC;}
      > > > > </style>
      > > > >
      > > > > </head>
      > > > >
      > > > > <body>
      > > > > <div id="hd">
      > > > > <h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a
      > > > > href="./">AutoComplete Widget</a> :: JavaScript Array</h1>
      > > > > </div>
      > > > >
      > > > > <div id="bd">
      > > > > <!-- Logger begins -->
      > > > > <div id="logger"></div>
      > > > > <!-- Logger ends -->
      > > > >
      > > > > <!-- AutoComplete begins -->
      > > > > <div id="statesmod">
      > > > > <form onsubmit="return
      > > YAHOO.example.ACJSArray.validateForm();">
      > > > > <h3>Find a state:</h3>
      > > > > <div id="statesautocomplete">
      > > > > <input id="statesinput">
      > > > > <div id="statescontainer"></div>
      > > > > </div>
      > > > >
      > > > > <select>
      > > > > <option>test</option>
      > > > > </select>
      > > > >
      > > > > </form>
      > > > > </div>
      > > > >
      > > > > <!-- AutoComplete ends -->
      > > > >
      > > > >
      > > > > <!-- Libary begins -->
      > > > > <script type="text/javascript"
      > > > src="../../build/yahoo/yahoo.js"></script>
      > > > > <script type="text/javascript"
      > src="../../build/dom/dom.js"></script>
      > > > > <script type="text/javascript"
      > > > > src="../../build/event/event-debug.js"></script>
      > > > > <script type="text/javascript"
      > > > > src="../../build/animation/animation.js"></script>
      > > > > <script type="text/javascript"
      > > > > src="../../build/autocomplete/autocomplete-debug.js"></script>
      > > > > <script type="text/javascript"
      > > > > src="../../build/logger/logger.js"></script>
      > > > > <!-- Library ends -->
      > > > >
      > > > >
      > > > >
      > > > > <!-- In-memory JS array begins-->
      > > > >
      > > > > <script type="text/javascript">
      > > > > var statesArray = [
      > > > > "Alabama",
      > > > > "Alaska",
      > > > > "Arizona",
      > > > > "Arkansas",
      > > > > "California",
      > > > > "Colorado",
      > > > > "Connecticut",
      > > > > "Delaware",
      > > > > "Florida",
      > > > > "Georgia",
      > > > > "Hawaii",
      > > > > "Idaho",
      > > > > "Illinois",
      > > > > "Indiana",
      > > > > "Iowa",
      > > > > "Kansas",
      > > > > "Kentucky",
      > > > > "Louisiana",
      > > > > "Maine",
      > > > > "Maryland",
      > > > > "Massachusetts",
      > > > > "Michigan",
      > > > > "Minnesota",
      > > > > "Mississippi",
      > > > > "Missouri",
      > > > > "Montana",
      > > > > "Nebraska",
      > > > > "Nevada",
      > > > > "New Hampshire",
      > > > > "New Jersey",
      > > > > "New Mexico",
      > > > > "New York",
      > > > > "North Dakota",
      > > > > "North Carolina",
      > > > > "Ohio",
      > > > > "Oklahoma",
      > > > > "Oregon",
      > > > > "Pennsylvania",
      > > > > "Rhode Island",
      > > > > "South Carolina",
      > > > > "South Dakota",
      > > > > "Tennessee",
      > > > > "Texas",
      > > > > "Utah",
      > > > > "Vermont",
      > > > > "Virginia",
      > > > > "Washington",
      > > > > "West Virginia",
      > > > > "Wisconsin",
      > > > > "Wyoming"
      > > > > ];
      > > > >
      > > > > </script>
      > > > >
      > > > > <!-- In-memory JS array ends-->
      > > > >
      > > > > <script type="text/javascript">
      > > > >
      > > > > YAHOO.example.ACJSArray = function() {
      > > > > var mylogger;
      > > > > var oACDS;
      > > > > var oAutoComp;
      > > > > return {
      > > > >
      > > > > init: function() {
      > > > > //Logger
      > > > > mylogger = new YAHOO.widget.LogReader("logger");
      > > > >
      > > > > // Instantiate first JS Array DataSource
      > > > > oACDS = new YAHOO.widget.DS_JSArray(statesArray);
      > > > >
      > > > > // Instantiate first AutoComplete
      > > > > oAutoComp = new
      > > > > YAHOO.widget.AutoComplete('statesinput','statescontainer', oACDS);
      > > > > oAutoComp.queryDelay = 0;
      > > > > oAutoComp.prehighlightClassName =
      "yui-ac-prehighlight";
      > > > > oAutoComp.typeAhead = true;
      > > > > oAutoComp.useShadow = true;
      > > > >
      > > > > },
      > > > >
      > > > >
      > > > >
      > > > > validateForm: function() {
      > > > > // Validate form inputs here
      > > > > return false;
      > > > > }
      > > > > };
      > > > > }();
      > > > >
      > > > >
      > >
      YAHOO.util.Event.addListener(this,'load',YAHOO.example.ACJSArray.init);
      > > > >
      > > > >
      > > > >
      > > > > // Fill in data to secondary select/list
      > > > >
      > > > > var interceptLink = function(e) {
      > > > > YAHOO.util.Event.preventDefault(e);
      > > > > alert("You had an event happen on the Find a State field.");
      > > > >
      > > > > }
      > > > >
      > > > > YAHOO.util.Event.addListener("statesinput", "blur",
      interceptLink);
      > > > >
      > > > >
      > > > > </script>
      > > > >
      > > > > <script type="text/javascript"
      > > > > src="../../docs/assets/dpSyntaxHighlighter.js"></script>
      > > > > <script type="text/javascript">
      > > > > dp.SyntaxHighlighter.HighlightAll('code');
      > > > > </script>
      > > > >
      > > > > </body>
      > > > > </html>
      > > > >
      > > >
      > > >
      > > > First I prefere DS_JSFunction to DS_JSArray.
      > > > Second, change your process init:
      > > > ../..
      > > > oAutoComp.typeAhead = true;
      > > > oAutoComp.useShadow = true;
      > > >
      > >
      >
      oAutoComp.itemSelectEvent.subscribe(YAHOO.example.ACJSArray.myItemSelectEvent);
      > > > },
      > > >
      > > > myItemSelectEvent: function(oSelf, elItem, oData){
      > > > /*
      > > > Populate your select field with asynch request
      > > > */
      > > > }
      > > >
      > > > This is to prevent to many asynch request
      > > >
      > >
      > >
      > > Thank you for your response, but I don't think that is headed in the
      > > direction to resolve my issue. My first call is fine and opon what is
      > > selected I need to collect that result and perform a second call to a
      > > PHP script which sends a JSON result set back that will be populated
      > > into a <select><option> list. So with
      > >
      > > var interceptLink = function(e) {
      > > YAHOO.util.Event.preventDefault(e);
      > > alert("You had an event happen on the Find a State field.");
      > >
      > > }
      > >
      > > YAHOO.util.Event.addListener("statesinput", "blur", interceptLink);
      > >
      > > I'm able to gather the result from the first auto complete call, what
      > > I'm having trouble with is getting it to make the second call out to
      > > the PHP script.
      > >
      >
      > Have you tried to use a YAHOO.widget.DS_XHR?
      >

      Ok I have tried this one more time and I'm still missing something I
      get inside the interceptLink and everything seems to be going fine
      there. I can get alerts, even have
      document.getElementById("jsonoutput").value =
      document.getElementById("EmployeeID").value;

      and it outputs the result from the first autocomplete. But when I try
      to get the second autocomplete to go I don't seem to get anything from
      it.

      My end goal is to have the EmployeeID from the first autocomplete
      result to call a second autocomplete that will put the results into a
      select list. I'm missing something and really need some help

      Thanks Jim


      <script type="text/javascript">
      <!--
      window.onload=function(){enableTooltips()};

      // START AUTOCOMPLETE
      YAHOO.example.ACJson = function(){
      var mylogger;
      var oACDS;
      var oAutoComp;
      var myServer = "ajaxresults/results.php";
      var mySchema = ["ResultSet.Result", "data1", "data2", "data3",
      "data4", "data5"];

      return {
      init: function() {
      // Logger
      mylogger = new YAHOO.widget.LogReader("logger");

      // Auto Complete

      oACDSEmployeeName = new YAHOO.widget.DS_XHR(myServer, mySchema);
      oACDSEmployeeName.scriptQueryAppend = "output=json&do=employeeName";
      // Needed for YWS
      oACDSEmployeeName.queryMatchContains = true;
      oACDSEmployeeName.autoHighlight = false;
      oACDSEmployeeName.useShadow = true;
      oACDSEmployeeName.allowBrowserAutocomplete = false;
      oACDSEmployeeName.maxResultsDisplayed = 100;

      // Instantiate AutoComplete
      oAutoCompEmployeeName = new
      YAHOO.widget.AutoComplete("jsoninput1","jsonoutput1", oACDSEmployeeName);
      oAutoCompEmployeeName.useIFrame = true;

      var myHandler = function(type, args, me) {
      var oAutoCompEmployeeName = args[0]; // the autocomplete instance
      var elListItem = args[1]; // the result list item element
      var data1 = args[2][0];
      var data2 = args[2][1];
      var data3 = args[2][2];
      var data4 = args[2][3];
      var data5 = args[2][4];
      document.getElementById("EmployeeID").value = data3; // Set data into
      employeeID form field
      }
      oAutoCompEmployeeName.itemSelectEvent.subscribe(myHandler);
      },

      validateForm: function() {
      // Validate form inputs here
      return false;
      }
      };
      }();

      YAHOO.util.Event.addListener(this,"load",YAHOO.example.ACJson.init);

      // Fill in data to secondary select/list


      var interceptLink = function(e) {
      YAHOO.util.Event.preventDefault(e);
      alert("You had an event happen on the Employee Name AutoComplete
      text field.");
      //document.getElementById("jsonoutput").value =
      document.getElementById("EmployeeID").value;


      oACDS = new YAHOO.widget.DS_XHR("ajaxresults/test.php",
      ["ResultSet.Result","title"]);
      oACDS.queryMatchContains = true;
      oACDS.scriptQueryAppend = "output=json&results=100"; // Needed for YWS
      // Instantiate AutoComplete
      oAutoComp = new YAHOO.widget.AutoComplete("EmployeeID","jsonoutput",
      oACDS);
      oAutoComp.useShadow = true;
      oAutoComp.alwaysShowContainer = true;

      oAutoComp.formatResult = function(oResultItem, sQuery) {
      alert (oResultItem[1].Title + " (" + oResultItem[1].Url + ")");
      return oResultItem[1].Title + " (" + oResultItem[1].Url + ")";
      };
      oAutoComp.doBeforeExpandContainer = function(oTextbox, oContainer,
      sQuery, aResults) {
      var pos = YAHOO.util.Dom.getXY(oTextbox);
      pos[1] += YAHOO.util.Dom.get(oTextbox).offsetHeight;
      YAHOO.util.Dom.setXY(oContainer,pos);
      return true;
      };




      }

      YAHOO.util.Event.addListener("jsoninput1", "change", interceptLink);

      // END AUTOCOMPLETE
      //-->
      </script>
    • bdetarade
      I don t know if the issue come from that, but you set a new autocomplet widget for every change. I put my code. Therefore ther i another issue. When I select a
      Message 2 of 10 , Apr 1, 2007
        I don't know if the issue come from that, but you set a new
        autocomplet widget for every change.

        I put my code. Therefore ther i another issue.
        When I select a item from the first autocomplete, the second is well
        refreshed. Then I select a value in the second everything is OK.
        BUT, when I select another value from the first autocomplete, the
        second is'nt correctly refreshed.

        // <!-- DEBUT AUTOCOMPLETE DES PAYS -->
        /**
        * Fonctions utilisées pour l'autocomplétion des pays
        * et des villes en fonction du pays sélectionné
        *
        * @variable datasetStates[i][j] : i == 0 => StateLib
        * i == 1 => StateUNID
        */
        var datasetStates;

        /**
        * Fonction retournant la liste des pays commençant par la chaine
        transmise en paramètre
        * en utilisant la variable datasetStates précédement initialisée
        *
        * @method getStates
        * @param sQuery {String} Query string.
        * @returns {String[]} Array of result objects.
        */
        function getStates(sQuery) {
        aResults = [];
        if(datasetStates == undefined){
        var columns = new Array(1);
        columns[0] = 0;
        columns[1] = 1;
        var datasetStates = dbColumn("","","Pays",columns);
        }
        if(sQuery && sQuery.length > 0) {

        if(datasetStates) {
        for(var i = datasetStates.length-1; i >= 0; i--) {
        var sKey = datasetStates[i][0];
        var sKeyIndex =
        encodeURI(sKey.toLowerCase()).indexOf(sQuery.toLowerCase());

        // Query found at the beginning of the key string for
        STARTSWITH
        // returns an array of arrays where STATE is index=0,
        ABBR is index=1
        if(sKeyIndex === 0) {
        aResults.unshift([sKey, datasetStates[i][1]]);
        }
        }
        return aResults;
        }
        }
        // Empty queries return all states
        else {
        for(var i = datasetStates.length-1; i >= 0; i--) {
        aResults.push([datasetStates[i][0], datasetStates[i][1]]);
        }
        return aResults;
        }
        }

        YAHOO.locations.autocompleteStates = function(){
        var oACDSStates;
        var oAutoCompStates;

        return {
        init: function() {

        // Instantiate JS Function DataSource
        oACDSStates = new YAHOO.widget.DS_JSFunction(getStates);
        oACDSStates.maxCacheEntries = 0;

        // Instantiate AutoComplete
        oAutoCompStates = new
        YAHOO.widget.AutoComplete('statesinput','statescontainer', oACDSStates);
        oAutoCompStates.alwaysShowContainer = true;
        oAutoCompStates.queryDelay = 0;
        oAutoCompStates.minQueryLength = 0;
        oAutoCompStates.maxResultsDisplayed = 50;
        oAutoCompStates.formatResult = function(oResultItem, sQuery) {
        var sMarkup = oResultItem[0] ;
        return (sMarkup);
        };

        // Subscribe to Custom Events

        oAutoCompStates.itemSelectEvent.subscribe(YAHOO.locations.autocompleteStates.myitemSelectEvent);

        oAutoCompStates.dataReturnEvent.subscribe(YAHOO.locations.autocompleteStates.myOnDataReturn);

        oAutoCompStates.containerCollapseEvent.subscribe(YAHOO.locations.autocompleteStates.myOnContainerCollapse);

        // Set initial content in the container
        oAutoCompStates.sendQuery("");

        },

        // Define Custom Event handlers
        myitemSelectEvent: function(oSelf, elItem, oData) {
        self.locations.statesID.value = elItem[2][1];
        self.locations.citiesID.value = "";
        self.locations.citiesinput.value = "";
        //YAHOO.example.Cities.init;
        YAHOO.locations.autocompleteCities.resetState(elItem[2][1]);
        },

        // Define Custom Event handlers
        myTextboxKeyEvent: function(oSelf, nKeyCode) {

        },

        myOnDataReturn: function(sType, aArgs) {
        var oAutoCompStates = aArgs[0];
        var sQuery = aArgs[1];
        var aResults = aArgs[2];

        if(aResults.length == 0) {
        oAutoCompStates.setBody("<div
        id=\"statescontainerdefault\">No matching results</div>");
        }
        },

        validateForm: function() {
        // Validate form inputs here
        return false;
        }
        };
        }();

        YAHOO.util.Event.addListener(this,'load',YAHOO.locations.autocompleteStates.init);
        // <!-- FIN AUTOCOMPLETE DES PAYS -->


        // <!-- DEBUT AUTOCOMPLETE DES VILLES -->
        /**
        * Fonctions utilisées pour l'autocomplétion des pays
        * et des villes en fonction du pays sélectionné
        *
        * @variable datasetCities[i][j] : i == 0 => CityLib
        * i == 1 => CityUNID
        */
        var datasetCities;

        /////////////////////////////////////////////////////////////////////////////
        //
        // Public methods
        //
        /////////////////////////////////////////////////////////////////////////////

        /**
        * setCitiesDataSet
        * Alimente le tableau datasetCities à partir du pays séléectionné
        * en effectuant une requête XML sur une vue DOMINO
        * via la méthode javascript dbLookUp
        *
        * @method setCitiesDataSet
        * @param stateUNID {String} UNID du pays sélectionné
        */
        function setCitiesDataSet(stateUNID) {
        datasetCities = [];
        if ( stateUNID.length == 0 ) {
        } else {
        var citiesColumns = new Array(1);
        citiesColumns[0] = 0;
        citiesColumns[1] = 1;
        datasetCities = dbLookup("","","LookUp$FKs", stateUNID, citiesColumns );
        }
        }

        /**
        * Fonction retournant la liste des villes commençant par la chaine
        transmise en paramètre
        * en utilisant la variable datasetCities précédement initialisée
        *
        * @method getCities
        * @param sQuery {String} Query string.
        * @returns {String[]} Array of result objects.
        */
        function getCities(sQuery) {
        aResults = [];
        if(sQuery && sQuery.length > 0) {

        if(datasetCities) {
        for(var i = datasetCities.length-1; i >= 0; i--) {
        var sKey = datasetCities[i][0];
        var sKeyIndex =
        encodeURI(sKey.toLowerCase()).indexOf(sQuery.toLowerCase());

        // Query found at the beginning of the key string for
        STARTSWITH
        // returns an array of arrays where STATE is index=0,
        ABBR is index=1
        if(sKeyIndex === 0) {
        aResults.unshift([sKey, datasetCities[i][1]]);
        }
        }
        return aResults;
        }
        }
        // Empty queries return all states
        else {
        for(var i = datasetCities.length-1; i >= 0; i--) {
        aResults.push([datasetCities[i][0], datasetCities[i][1]]);
        }
        return aResults;
        }
        }

        YAHOO.locations.autocompleteCities = function(){
        var oACDSCities;
        var oAutoCompCities;

        return {
        init: function() {

        // Instantiate JS Function DataSource
        oACDSCities = new YAHOO.widget.DS_JSFunction(getCities);
        oACDSCities.maxCacheEntries = 0;

        // Instantiate AutoComplete
        oAutoCompCities = new
        YAHOO.widget.AutoComplete('citiesinput','citiescontainer', oACDSCities);
        oAutoCompCities.alwaysShowContainer = true;
        oAutoCompCities.queryDelay = 0;
        oAutoCompCities.forceSelection = true;
        oAutoCompCities.minQueryLength = 0;
        oAutoCompCities.maxResultsDisplayed = 50;
        oAutoCompCities.formatResult = function(oResultItem, sQuery) {
        var sMarkup = oResultItem[0] ;
        return (sMarkup);
        };

        // Subscribe to Custom Events

        oAutoCompCities.itemSelectEvent.subscribe(YAHOO.locations.autocompleteCities.myitemSelectEvent);

        oAutoCompCities.dataReturnEvent.subscribe(YAHOO.locations.autocompleteCities.myOnDataReturn);

        oAutoCompCities.containerCollapseEvent.subscribe(YAHOO.locations.autocompleteCities.myOnContainerCollapse);

        // Set initial content in the container
        oAutoCompCities.sendQuery("");

        },

        resetState: function(StateID) {
        setCitiesDataSet(StateID);

        oAutoCompCities.dataSource.flushCache;
        oAutoCompCities.typeAheadEvent.fire(oAutoCompCities, "","");
        oAutoCompCities.sendQuery("");

        },

        // Define Custom Event handlers
        myitemSelectEvent: function(oSelf, elItem, oData) {
        self.locations.citiesID.value = elItem[2][1];
        },

        // Define Custom Event handlers
        myTextboxKeyEvent: function(oSelf, nKeyCode) {
        },

        myOnDataReturn: function(sType, aArgs) {
        var oAutoCompCities = aArgs[0];
        var sQuery = aArgs[1];
        var aResults = aArgs[2];

        if(aResults.length == 0) {
        oAutoCompCities.setBody("<div
        id=\"citiescontainerdefault\"></div>");
        }
        },

        validateForm: function() {
        // Validate form inputs here
        return false;
        }
        };
        }();

        setCitiesDataSet("");

        YAHOO.util.Event.addListener(this,'load',YAHOO.locations.autocompleteCities.init);
      • jennykhan
        Hi Jim, AutoComplete by nature is meant to be triggered by keystrokes. Are you updating the value of the input box programmatically and expecting to see
        Message 3 of 10 , Apr 9, 2007
          Hi Jim,

          AutoComplete by nature is meant to be triggered by keystrokes. Are you
          updating the value of the input box programmatically and expecting to
          see results populate the container? If so, try calling somthing like
          the following to programmatically trigger the query:

          oAutoComp.sendQuery(document.getElementById("EmployeeID").value);

          Hope that helps,
          Jenny



          --- In ydn-javascript@yahoogroups.com, "fcko9" <jim@...> wrote:
          >
          > --- In ydn-javascript@yahoogroups.com, "bdetarade"
          > <benoit.de.tarade@> wrote:
          > >
          > > --- In ydn-javascript@yahoogroups.com, "THECREW" <jim@> wrote:
          > > >
          > > > --- In ydn-javascript@yahoogroups.com, "bdetarade"
          > > > <benoit.de.tarade@> wrote:
          > > > >
          > > > > --- In ydn-javascript@yahoogroups.com, "THECREW" <jim@> wrote:
          > > > > >
          > > > > > Below is a modification to the states array example. What I'm
          > trying
          > > > > > to figure out is once
          YAHOO.util.Event.addListener("statesinput",
          > > > > > "blur", interceptLink);
          > > > > > is triggered and inside interceptLink how can I get it to make a
          > > call
          > > > > > to a php file that will return a JSON result set that I can
          > populate
          > > > > > into a select field named testOption? I have tried several
          > differn't
          > > > > > ideas and they all have failed, can some one please give me some
          > > > advise.
          > > > > >
          > > > > > Thanks
          > > > > > Jim
          > > > > >
          > > > > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
          > > > > > "http://www.w3.org/TR/html4/strict.dtd">
          > > > > >
          > > > > > <html>
          > > > > >
          > > > > > <head>
          > > > > >
          > > > > > <title>AutoComplete Widget :: JS Array Example</title>
          > > > > >
          > > > > > <link type="text/css" rel="stylesheet"
          > > > > href="../../build/reset/reset.css">
          > > > > > <link type="text/css" rel="stylesheet"
          > > > > href="../../build/fonts/fonts.css">
          > > > > > <link type="text/css" rel="stylesheet"
          > > > > > href="../../build/logger/assets/logger.css">
          > > > > > <link type="text/css" rel="stylesheet"
          href="./css/examples.css">
          > > > > > <link type="text/css" rel="stylesheet"
          > > > > > href="../../docs/assets/dpSyntaxHighlighter.css">
          > > > > >
          > > > > > <style type="text/css">
          > > > > > #statesmod {position:relative;}
          > > > > > #statesautocomplete, #statesautocomplete2
          > > > > > {position:relative;width:15em;margin-bottom:1em;}/* set width of
          > > > > > widget here*/
          > > > > > #statesautocomplete {z-index:9000} /* for IE z-index of
          > absolute
          > > > > > divs inside relative divs issue */
          > > > > > #statesinput, #statesinput2
          > {width:100%;height:1.4em;z-index:0;}
          > > > > > #statescontainer, #statescontainer2
          > > > > > {position:absolute;top:1.7em;width:100%}
          > > > > > #statescontainer .yui-ac-content, #statescontainer2
          > > > > > .yui-ac-content {position:absolute;width:100%;border:1px solid
          > > > > > #404040;background:#fff;overflow:hidden;z-index:9050;}
          > > > > > #statescontainer .yui-ac-shadow, #statescontainer2
          > > .yui-ac-shadow
          > > > > >
          > > > >
          > > >
          > >
          >
          {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
          > > > > > #statescontainer ul, #statescontainer2 ul {padding:5px
          > > > > 0;width:100%;}
          > > > > > #statescontainer li, #statescontainer2 li {padding:0
          > > > > > 5px;cursor:default;white-space:nowrap;}
          > > > > > #statescontainer li.yui-ac-highlight, #statescontainer2
          > > > > > li.yui-ac-highlight {background:#ff0;}
          > > > > > #statescontainer li.yui-ac-prehighlight,#statescontainer2
          > > > > > li.yui-ac-prehighlight {background:#FFFFCC;}
          > > > > > </style>
          > > > > >
          > > > > > </head>
          > > > > >
          > > > > > <body>
          > > > > > <div id="hd">
          > > > > > <h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a
          > > > > > href="./">AutoComplete Widget</a> :: JavaScript Array</h1>
          > > > > > </div>
          > > > > >
          > > > > > <div id="bd">
          > > > > > <!-- Logger begins -->
          > > > > > <div id="logger"></div>
          > > > > > <!-- Logger ends -->
          > > > > >
          > > > > > <!-- AutoComplete begins -->
          > > > > > <div id="statesmod">
          > > > > > <form onsubmit="return
          > > > YAHOO.example.ACJSArray.validateForm();">
          > > > > > <h3>Find a state:</h3>
          > > > > > <div id="statesautocomplete">
          > > > > > <input id="statesinput">
          > > > > > <div id="statescontainer"></div>
          > > > > > </div>
          > > > > >
          > > > > > <select>
          > > > > > <option>test</option>
          > > > > > </select>
          > > > > >
          > > > > > </form>
          > > > > > </div>
          > > > > >
          > > > > > <!-- AutoComplete ends -->
          > > > > >
          > > > > >
          > > > > > <!-- Libary begins -->
          > > > > > <script type="text/javascript"
          > > > > src="../../build/yahoo/yahoo.js"></script>
          > > > > > <script type="text/javascript"
          > > src="../../build/dom/dom.js"></script>
          > > > > > <script type="text/javascript"
          > > > > > src="../../build/event/event-debug.js"></script>
          > > > > > <script type="text/javascript"
          > > > > > src="../../build/animation/animation.js"></script>
          > > > > > <script type="text/javascript"
          > > > > > src="../../build/autocomplete/autocomplete-debug.js"></script>
          > > > > > <script type="text/javascript"
          > > > > > src="../../build/logger/logger.js"></script>
          > > > > > <!-- Library ends -->
          > > > > >
          > > > > >
          > > > > >
          > > > > > <!-- In-memory JS array begins-->
          > > > > >
          > > > > > <script type="text/javascript">
          > > > > > var statesArray = [
          > > > > > "Alabama",
          > > > > > "Alaska",
          > > > > > "Arizona",
          > > > > > "Arkansas",
          > > > > > "California",
          > > > > > "Colorado",
          > > > > > "Connecticut",
          > > > > > "Delaware",
          > > > > > "Florida",
          > > > > > "Georgia",
          > > > > > "Hawaii",
          > > > > > "Idaho",
          > > > > > "Illinois",
          > > > > > "Indiana",
          > > > > > "Iowa",
          > > > > > "Kansas",
          > > > > > "Kentucky",
          > > > > > "Louisiana",
          > > > > > "Maine",
          > > > > > "Maryland",
          > > > > > "Massachusetts",
          > > > > > "Michigan",
          > > > > > "Minnesota",
          > > > > > "Mississippi",
          > > > > > "Missouri",
          > > > > > "Montana",
          > > > > > "Nebraska",
          > > > > > "Nevada",
          > > > > > "New Hampshire",
          > > > > > "New Jersey",
          > > > > > "New Mexico",
          > > > > > "New York",
          > > > > > "North Dakota",
          > > > > > "North Carolina",
          > > > > > "Ohio",
          > > > > > "Oklahoma",
          > > > > > "Oregon",
          > > > > > "Pennsylvania",
          > > > > > "Rhode Island",
          > > > > > "South Carolina",
          > > > > > "South Dakota",
          > > > > > "Tennessee",
          > > > > > "Texas",
          > > > > > "Utah",
          > > > > > "Vermont",
          > > > > > "Virginia",
          > > > > > "Washington",
          > > > > > "West Virginia",
          > > > > > "Wisconsin",
          > > > > > "Wyoming"
          > > > > > ];
          > > > > >
          > > > > > </script>
          > > > > >
          > > > > > <!-- In-memory JS array ends-->
          > > > > >
          > > > > > <script type="text/javascript">
          > > > > >
          > > > > > YAHOO.example.ACJSArray = function() {
          > > > > > var mylogger;
          > > > > > var oACDS;
          > > > > > var oAutoComp;
          > > > > > return {
          > > > > >
          > > > > > init: function() {
          > > > > > //Logger
          > > > > > mylogger = new YAHOO.widget.LogReader("logger");
          > > > > >
          > > > > > // Instantiate first JS Array DataSource
          > > > > > oACDS = new YAHOO.widget.DS_JSArray(statesArray);
          > > > > >
          > > > > > // Instantiate first AutoComplete
          > > > > > oAutoComp = new
          > > > > > YAHOO.widget.AutoComplete('statesinput','statescontainer',
          oACDS);
          > > > > > oAutoComp.queryDelay = 0;
          > > > > > oAutoComp.prehighlightClassName =
          > "yui-ac-prehighlight";
          > > > > > oAutoComp.typeAhead = true;
          > > > > > oAutoComp.useShadow = true;
          > > > > >
          > > > > > },
          > > > > >
          > > > > >
          > > > > >
          > > > > > validateForm: function() {
          > > > > > // Validate form inputs here
          > > > > > return false;
          > > > > > }
          > > > > > };
          > > > > > }();
          > > > > >
          > > > > >
          > > >
          > YAHOO.util.Event.addListener(this,'load',YAHOO.example.ACJSArray.init);
          > > > > >
          > > > > >
          > > > > >
          > > > > > // Fill in data to secondary select/list
          > > > > >
          > > > > > var interceptLink = function(e) {
          > > > > > YAHOO.util.Event.preventDefault(e);
          > > > > > alert("You had an event happen on the Find a State
          field.");
          > > > > >
          > > > > > }
          > > > > >
          > > > > > YAHOO.util.Event.addListener("statesinput", "blur",
          > interceptLink);
          > > > > >
          > > > > >
          > > > > > </script>
          > > > > >
          > > > > > <script type="text/javascript"
          > > > > > src="../../docs/assets/dpSyntaxHighlighter.js"></script>
          > > > > > <script type="text/javascript">
          > > > > > dp.SyntaxHighlighter.HighlightAll('code');
          > > > > > </script>
          > > > > >
          > > > > > </body>
          > > > > > </html>
          > > > > >
          > > > >
          > > > >
          > > > > First I prefere DS_JSFunction to DS_JSArray.
          > > > > Second, change your process init:
          > > > > ../..
          > > > > oAutoComp.typeAhead = true;
          > > > > oAutoComp.useShadow = true;
          > > > >
          > > >
          > >
          >
          oAutoComp.itemSelectEvent.subscribe(YAHOO.example.ACJSArray.myItemSelectEvent);
          > > > > },
          > > > >
          > > > > myItemSelectEvent: function(oSelf, elItem, oData){
          > > > > /*
          > > > > Populate your select field with asynch request
          > > > > */
          > > > > }
          > > > >
          > > > > This is to prevent to many asynch request
          > > > >
          > > >
          > > >
          > > > Thank you for your response, but I don't think that is headed in the
          > > > direction to resolve my issue. My first call is fine and opon
          what is
          > > > selected I need to collect that result and perform a second call
          to a
          > > > PHP script which sends a JSON result set back that will be populated
          > > > into a <select><option> list. So with
          > > >
          > > > var interceptLink = function(e) {
          > > > YAHOO.util.Event.preventDefault(e);
          > > > alert("You had an event happen on the Find a State field.");
          > > >
          > > > }
          > > >
          > > > YAHOO.util.Event.addListener("statesinput", "blur", interceptLink);
          > > >
          > > > I'm able to gather the result from the first auto complete call,
          what
          > > > I'm having trouble with is getting it to make the second call out to
          > > > the PHP script.
          > > >
          > >
          > > Have you tried to use a YAHOO.widget.DS_XHR?
          > >
          >
          > Ok I have tried this one more time and I'm still missing something I
          > get inside the interceptLink and everything seems to be going fine
          > there. I can get alerts, even have
          > document.getElementById("jsonoutput").value =
          > document.getElementById("EmployeeID").value;
          >
          > and it outputs the result from the first autocomplete. But when I try
          > to get the second autocomplete to go I don't seem to get anything from
          > it.
          >
          > My end goal is to have the EmployeeID from the first autocomplete
          > result to call a second autocomplete that will put the results into a
          > select list. I'm missing something and really need some help
          >
          > Thanks Jim
          >
          >
          > <script type="text/javascript">
          > <!--
          > window.onload=function(){enableTooltips()};
          >
          > // START AUTOCOMPLETE
          > YAHOO.example.ACJson = function(){
          > var mylogger;
          > var oACDS;
          > var oAutoComp;
          > var myServer = "ajaxresults/results.php";
          > var mySchema = ["ResultSet.Result", "data1", "data2", "data3",
          > "data4", "data5"];
          >
          > return {
          > init: function() {
          > // Logger
          > mylogger = new YAHOO.widget.LogReader("logger");
          >
          > // Auto Complete
          >
          > oACDSEmployeeName = new YAHOO.widget.DS_XHR(myServer, mySchema);
          > oACDSEmployeeName.scriptQueryAppend = "output=json&do=employeeName";
          > // Needed for YWS
          > oACDSEmployeeName.queryMatchContains = true;
          > oACDSEmployeeName.autoHighlight = false;
          > oACDSEmployeeName.useShadow = true;
          > oACDSEmployeeName.allowBrowserAutocomplete = false;
          > oACDSEmployeeName.maxResultsDisplayed = 100;
          >
          > // Instantiate AutoComplete
          > oAutoCompEmployeeName = new
          > YAHOO.widget.AutoComplete("jsoninput1","jsonoutput1",
          oACDSEmployeeName);
          > oAutoCompEmployeeName.useIFrame = true;
          >
          > var myHandler = function(type, args, me) {
          > var oAutoCompEmployeeName = args[0]; // the autocomplete instance
          > var elListItem = args[1]; // the result list item element
          > var data1 = args[2][0];
          > var data2 = args[2][1];
          > var data3 = args[2][2];
          > var data4 = args[2][3];
          > var data5 = args[2][4];
          > document.getElementById("EmployeeID").value = data3; // Set data into
          > employeeID form field
          > }
          > oAutoCompEmployeeName.itemSelectEvent.subscribe(myHandler);
          > },
          >
          > validateForm: function() {
          > // Validate form inputs here
          > return false;
          > }
          > };
          > }();
          >
          > YAHOO.util.Event.addListener(this,"load",YAHOO.example.ACJson.init);
          >
          > // Fill in data to secondary select/list
          >
          >
          > var interceptLink = function(e) {
          > YAHOO.util.Event.preventDefault(e);
          > alert("You had an event happen on the Employee Name AutoComplete
          > text field.");
          > //document.getElementById("jsonoutput").value =
          > document.getElementById("EmployeeID").value;
          >
          >
          > oACDS = new YAHOO.widget.DS_XHR("ajaxresults/test.php",
          > ["ResultSet.Result","title"]);
          > oACDS.queryMatchContains = true;
          > oACDS.scriptQueryAppend = "output=json&results=100"; // Needed for YWS
          > // Instantiate AutoComplete
          > oAutoComp = new YAHOO.widget.AutoComplete("EmployeeID","jsonoutput",
          > oACDS);
          > oAutoComp.useShadow = true;
          > oAutoComp.alwaysShowContainer = true;
          >
          > oAutoComp.formatResult = function(oResultItem, sQuery) {
          > alert (oResultItem[1].Title + " (" + oResultItem[1].Url + ")");
          > return oResultItem[1].Title + " (" + oResultItem[1].Url + ")";
          > };
          > oAutoComp.doBeforeExpandContainer = function(oTextbox, oContainer,
          > sQuery, aResults) {
          > var pos = YAHOO.util.Dom.getXY(oTextbox);
          > pos[1] += YAHOO.util.Dom.get(oTextbox).offsetHeight;
          > YAHOO.util.Dom.setXY(oContainer,pos);
          > return true;
          > };
          >
          >
          >
          >
          > }
          >
          > YAHOO.util.Event.addListener("jsoninput1", "change", interceptLink);
          >
          > // END AUTOCOMPLETE
          > //-->
          > </script>
          >
        • fcko9
          Jenny, Thanks that did exactly what I needed. You ve helped me several times here, I just wanted to take a second and thank you for all of your support and
          Message 4 of 10 , Apr 10, 2007
            Jenny,

            Thanks that did exactly what I needed. You've helped me several times
            here, I just wanted to take a second and thank you for all of your
            support and help.

            Jim

            --- In ydn-javascript@yahoogroups.com, "jennykhan" <jennyhan@...> wrote:
            >
            > Hi Jim,
            >
            > AutoComplete by nature is meant to be triggered by keystrokes. Are you
            > updating the value of the input box programmatically and expecting to
            > see results populate the container? If so, try calling somthing like
            > the following to programmatically trigger the query:
            >
            > oAutoComp.sendQuery(document.getElementById("EmployeeID").value);
            >
            > Hope that helps,
            > Jenny
            >
            >
            >
            > --- In ydn-javascript@yahoogroups.com, "fcko9" <jim@> wrote:
            > >
            > > --- In ydn-javascript@yahoogroups.com, "bdetarade"
            > > <benoit.de.tarade@> wrote:
            > > >
            > > > --- In ydn-javascript@yahoogroups.com, "THECREW" <jim@> wrote:
            > > > >
            > > > > --- In ydn-javascript@yahoogroups.com, "bdetarade"
            > > > > <benoit.de.tarade@> wrote:
            > > > > >
            > > > > > --- In ydn-javascript@yahoogroups.com, "THECREW" <jim@> wrote:
            > > > > > >
            > > > > > > Below is a modification to the states array example. What I'm
            > > trying
            > > > > > > to figure out is once
            > YAHOO.util.Event.addListener("statesinput",
            > > > > > > "blur", interceptLink);
            > > > > > > is triggered and inside interceptLink how can I get it to
            make a
            > > > call
            > > > > > > to a php file that will return a JSON result set that I can
            > > populate
            > > > > > > into a select field named testOption? I have tried several
            > > differn't
            > > > > > > ideas and they all have failed, can some one please give
            me some
            > > > > advise.
            > > > > > >
            > > > > > > Thanks
            > > > > > > Jim
            > > > > > >
            > > > > > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            > > > > > > "http://www.w3.org/TR/html4/strict.dtd">
            > > > > > >
            > > > > > > <html>
            > > > > > >
            > > > > > > <head>
            > > > > > >
            > > > > > > <title>AutoComplete Widget :: JS Array Example</title>
            > > > > > >
            > > > > > > <link type="text/css" rel="stylesheet"
            > > > > > href="../../build/reset/reset.css">
            > > > > > > <link type="text/css" rel="stylesheet"
            > > > > > href="../../build/fonts/fonts.css">
            > > > > > > <link type="text/css" rel="stylesheet"
            > > > > > > href="../../build/logger/assets/logger.css">
            > > > > > > <link type="text/css" rel="stylesheet"
            > href="./css/examples.css">
            > > > > > > <link type="text/css" rel="stylesheet"
            > > > > > > href="../../docs/assets/dpSyntaxHighlighter.css">
            > > > > > >
            > > > > > > <style type="text/css">
            > > > > > > #statesmod {position:relative;}
            > > > > > > #statesautocomplete, #statesautocomplete2
            > > > > > > {position:relative;width:15em;margin-bottom:1em;}/* set
            width of
            > > > > > > widget here*/
            > > > > > > #statesautocomplete {z-index:9000} /* for IE z-index of
            > > absolute
            > > > > > > divs inside relative divs issue */
            > > > > > > #statesinput, #statesinput2
            > > {width:100%;height:1.4em;z-index:0;}
            > > > > > > #statescontainer, #statescontainer2
            > > > > > > {position:absolute;top:1.7em;width:100%}
            > > > > > > #statescontainer .yui-ac-content, #statescontainer2
            > > > > > > .yui-ac-content {position:absolute;width:100%;border:1px solid
            > > > > > > #404040;background:#fff;overflow:hidden;z-index:9050;}
            > > > > > > #statescontainer .yui-ac-shadow, #statescontainer2
            > > > .yui-ac-shadow
            > > > > > >
            > > > > >
            > > > >
            > > >
            > >
            >
            {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
            > > > > > > #statescontainer ul, #statescontainer2 ul {padding:5px
            > > > > > 0;width:100%;}
            > > > > > > #statescontainer li, #statescontainer2 li {padding:0
            > > > > > > 5px;cursor:default;white-space:nowrap;}
            > > > > > > #statescontainer li.yui-ac-highlight, #statescontainer2
            > > > > > > li.yui-ac-highlight {background:#ff0;}
            > > > > > > #statescontainer li.yui-ac-prehighlight,#statescontainer2
            > > > > > > li.yui-ac-prehighlight {background:#FFFFCC;}
            > > > > > > </style>
            > > > > > >
            > > > > > > </head>
            > > > > > >
            > > > > > > <body>
            > > > > > > <div id="hd">
            > > > > > > <h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a
            > > > > > > href="./">AutoComplete Widget</a> :: JavaScript Array</h1>
            > > > > > > </div>
            > > > > > >
            > > > > > > <div id="bd">
            > > > > > > <!-- Logger begins -->
            > > > > > > <div id="logger"></div>
            > > > > > > <!-- Logger ends -->
            > > > > > >
            > > > > > > <!-- AutoComplete begins -->
            > > > > > > <div id="statesmod">
            > > > > > > <form onsubmit="return
            > > > > YAHOO.example.ACJSArray.validateForm();">
            > > > > > > <h3>Find a state:</h3>
            > > > > > > <div id="statesautocomplete">
            > > > > > > <input id="statesinput">
            > > > > > > <div id="statescontainer"></div>
            > > > > > > </div>
            > > > > > >
            > > > > > > <select>
            > > > > > > <option>test</option>
            > > > > > > </select>
            > > > > > >
            > > > > > > </form>
            > > > > > > </div>
            > > > > > >
            > > > > > > <!-- AutoComplete ends -->
            > > > > > >
            > > > > > >
            > > > > > > <!-- Libary begins -->
            > > > > > > <script type="text/javascript"
            > > > > > src="../../build/yahoo/yahoo.js"></script>
            > > > > > > <script type="text/javascript"
            > > > src="../../build/dom/dom.js"></script>
            > > > > > > <script type="text/javascript"
            > > > > > > src="../../build/event/event-debug.js"></script>
            > > > > > > <script type="text/javascript"
            > > > > > > src="../../build/animation/animation.js"></script>
            > > > > > > <script type="text/javascript"
            > > > > > > src="../../build/autocomplete/autocomplete-debug.js"></script>
            > > > > > > <script type="text/javascript"
            > > > > > > src="../../build/logger/logger.js"></script>
            > > > > > > <!-- Library ends -->
            > > > > > >
            > > > > > >
            > > > > > >
            > > > > > > <!-- In-memory JS array begins-->
            > > > > > >
            > > > > > > <script type="text/javascript">
            > > > > > > var statesArray = [
            > > > > > > "Alabama",
            > > > > > > "Alaska",
            > > > > > > "Arizona",
            > > > > > > "Arkansas",
            > > > > > > "California",
            > > > > > > "Colorado",
            > > > > > > "Connecticut",
            > > > > > > "Delaware",
            > > > > > > "Florida",
            > > > > > > "Georgia",
            > > > > > > "Hawaii",
            > > > > > > "Idaho",
            > > > > > > "Illinois",
            > > > > > > "Indiana",
            > > > > > > "Iowa",
            > > > > > > "Kansas",
            > > > > > > "Kentucky",
            > > > > > > "Louisiana",
            > > > > > > "Maine",
            > > > > > > "Maryland",
            > > > > > > "Massachusetts",
            > > > > > > "Michigan",
            > > > > > > "Minnesota",
            > > > > > > "Mississippi",
            > > > > > > "Missouri",
            > > > > > > "Montana",
            > > > > > > "Nebraska",
            > > > > > > "Nevada",
            > > > > > > "New Hampshire",
            > > > > > > "New Jersey",
            > > > > > > "New Mexico",
            > > > > > > "New York",
            > > > > > > "North Dakota",
            > > > > > > "North Carolina",
            > > > > > > "Ohio",
            > > > > > > "Oklahoma",
            > > > > > > "Oregon",
            > > > > > > "Pennsylvania",
            > > > > > > "Rhode Island",
            > > > > > > "South Carolina",
            > > > > > > "South Dakota",
            > > > > > > "Tennessee",
            > > > > > > "Texas",
            > > > > > > "Utah",
            > > > > > > "Vermont",
            > > > > > > "Virginia",
            > > > > > > "Washington",
            > > > > > > "West Virginia",
            > > > > > > "Wisconsin",
            > > > > > > "Wyoming"
            > > > > > > ];
            > > > > > >
            > > > > > > </script>
            > > > > > >
            > > > > > > <!-- In-memory JS array ends-->
            > > > > > >
            > > > > > > <script type="text/javascript">
            > > > > > >
            > > > > > > YAHOO.example.ACJSArray = function() {
            > > > > > > var mylogger;
            > > > > > > var oACDS;
            > > > > > > var oAutoComp;
            > > > > > > return {
            > > > > > >
            > > > > > > init: function() {
            > > > > > > //Logger
            > > > > > > mylogger = new YAHOO.widget.LogReader("logger");
            > > > > > >
            > > > > > > // Instantiate first JS Array DataSource
            > > > > > > oACDS = new YAHOO.widget.DS_JSArray(statesArray);
            > > > > > >
            > > > > > > // Instantiate first AutoComplete
            > > > > > > oAutoComp = new
            > > > > > > YAHOO.widget.AutoComplete('statesinput','statescontainer',
            > oACDS);
            > > > > > > oAutoComp.queryDelay = 0;
            > > > > > > oAutoComp.prehighlightClassName =
            > > "yui-ac-prehighlight";
            > > > > > > oAutoComp.typeAhead = true;
            > > > > > > oAutoComp.useShadow = true;
            > > > > > >
            > > > > > > },
            > > > > > >
            > > > > > >
            > > > > > >
            > > > > > > validateForm: function() {
            > > > > > > // Validate form inputs here
            > > > > > > return false;
            > > > > > > }
            > > > > > > };
            > > > > > > }();
            > > > > > >
            > > > > > >
            > > > >
            > >
            YAHOO.util.Event.addListener(this,'load',YAHOO.example.ACJSArray.init);
            > > > > > >
            > > > > > >
            > > > > > >
            > > > > > > // Fill in data to secondary select/list
            > > > > > >
            > > > > > > var interceptLink = function(e) {
            > > > > > > YAHOO.util.Event.preventDefault(e);
            > > > > > > alert("You had an event happen on the Find a State
            > field.");
            > > > > > >
            > > > > > > }
            > > > > > >
            > > > > > > YAHOO.util.Event.addListener("statesinput", "blur",
            > > interceptLink);
            > > > > > >
            > > > > > >
            > > > > > > </script>
            > > > > > >
            > > > > > > <script type="text/javascript"
            > > > > > > src="../../docs/assets/dpSyntaxHighlighter.js"></script>
            > > > > > > <script type="text/javascript">
            > > > > > > dp.SyntaxHighlighter.HighlightAll('code');
            > > > > > > </script>
            > > > > > >
            > > > > > > </body>
            > > > > > > </html>
            > > > > > >
            > > > > >
            > > > > >
            > > > > > First I prefere DS_JSFunction to DS_JSArray.
            > > > > > Second, change your process init:
            > > > > > ../..
            > > > > > oAutoComp.typeAhead = true;
            > > > > > oAutoComp.useShadow = true;
            > > > > >
            > > > >
            > > >
            > >
            >
            oAutoComp.itemSelectEvent.subscribe(YAHOO.example.ACJSArray.myItemSelectEvent);
            > > > > > },
            > > > > >
            > > > > > myItemSelectEvent: function(oSelf, elItem, oData){
            > > > > > /*
            > > > > > Populate your select field with asynch request
            > > > > > */
            > > > > > }
            > > > > >
            > > > > > This is to prevent to many asynch request
            > > > > >
            > > > >
            > > > >
            > > > > Thank you for your response, but I don't think that is headed
            in the
            > > > > direction to resolve my issue. My first call is fine and opon
            > what is
            > > > > selected I need to collect that result and perform a second call
            > to a
            > > > > PHP script which sends a JSON result set back that will be
            populated
            > > > > into a <select><option> list. So with
            > > > >
            > > > > var interceptLink = function(e) {
            > > > > YAHOO.util.Event.preventDefault(e);
            > > > > alert("You had an event happen on the Find a State field.");
            > > > >
            > > > > }
            > > > >
            > > > > YAHOO.util.Event.addListener("statesinput", "blur",
            interceptLink);
            > > > >
            > > > > I'm able to gather the result from the first auto complete call,
            > what
            > > > > I'm having trouble with is getting it to make the second call
            out to
            > > > > the PHP script.
            > > > >
            > > >
            > > > Have you tried to use a YAHOO.widget.DS_XHR?
            > > >
            > >
            > > Ok I have tried this one more time and I'm still missing something I
            > > get inside the interceptLink and everything seems to be going fine
            > > there. I can get alerts, even have
            > > document.getElementById("jsonoutput").value =
            > > document.getElementById("EmployeeID").value;
            > >
            > > and it outputs the result from the first autocomplete. But when I try
            > > to get the second autocomplete to go I don't seem to get anything from
            > > it.
            > >
            > > My end goal is to have the EmployeeID from the first autocomplete
            > > result to call a second autocomplete that will put the results into a
            > > select list. I'm missing something and really need some help
            > >
            > > Thanks Jim
            > >
            > >
            > > <script type="text/javascript">
            > > <!--
            > > window.onload=function(){enableTooltips()};
            > >
            > > // START AUTOCOMPLETE
            > > YAHOO.example.ACJson = function(){
            > > var mylogger;
            > > var oACDS;
            > > var oAutoComp;
            > > var myServer = "ajaxresults/results.php";
            > > var mySchema = ["ResultSet.Result", "data1", "data2", "data3",
            > > "data4", "data5"];
            > >
            > > return {
            > > init: function() {
            > > // Logger
            > > mylogger = new YAHOO.widget.LogReader("logger");
            > >
            > > // Auto Complete
            > >
            > > oACDSEmployeeName = new YAHOO.widget.DS_XHR(myServer, mySchema);
            > > oACDSEmployeeName.scriptQueryAppend = "output=json&do=employeeName";
            > > // Needed for YWS
            > > oACDSEmployeeName.queryMatchContains = true;
            > > oACDSEmployeeName.autoHighlight = false;
            > > oACDSEmployeeName.useShadow = true;
            > > oACDSEmployeeName.allowBrowserAutocomplete = false;
            > > oACDSEmployeeName.maxResultsDisplayed = 100;
            > >
            > > // Instantiate AutoComplete
            > > oAutoCompEmployeeName = new
            > > YAHOO.widget.AutoComplete("jsoninput1","jsonoutput1",
            > oACDSEmployeeName);
            > > oAutoCompEmployeeName.useIFrame = true;
            > >
            > > var myHandler = function(type, args, me) {
            > > var oAutoCompEmployeeName = args[0]; // the autocomplete instance
            > > var elListItem = args[1]; // the result list item element
            > > var data1 = args[2][0];
            > > var data2 = args[2][1];
            > > var data3 = args[2][2];
            > > var data4 = args[2][3];
            > > var data5 = args[2][4];
            > > document.getElementById("EmployeeID").value = data3; // Set data into
            > > employeeID form field
            > > }
            > > oAutoCompEmployeeName.itemSelectEvent.subscribe(myHandler);
            > > },
            > >
            > > validateForm: function() {
            > > // Validate form inputs here
            > > return false;
            > > }
            > > };
            > > }();
            > >
            > > YAHOO.util.Event.addListener(this,"load",YAHOO.example.ACJson.init);
            > >
            > > // Fill in data to secondary select/list
            > >
            > >
            > > var interceptLink = function(e) {
            > > YAHOO.util.Event.preventDefault(e);
            > > alert("You had an event happen on the Employee Name AutoComplete
            > > text field.");
            > > //document.getElementById("jsonoutput").value =
            > > document.getElementById("EmployeeID").value;
            > >
            > >
            > > oACDS = new YAHOO.widget.DS_XHR("ajaxresults/test.php",
            > > ["ResultSet.Result","title"]);
            > > oACDS.queryMatchContains = true;
            > > oACDS.scriptQueryAppend = "output=json&results=100"; // Needed
            for YWS
            > > // Instantiate AutoComplete
            > > oAutoComp = new YAHOO.widget.AutoComplete("EmployeeID","jsonoutput",
            > > oACDS);
            > > oAutoComp.useShadow = true;
            > > oAutoComp.alwaysShowContainer = true;
            > >
            > > oAutoComp.formatResult = function(oResultItem, sQuery) {
            > > alert (oResultItem[1].Title + " (" + oResultItem[1].Url + ")");
            > > return oResultItem[1].Title + " (" + oResultItem[1].Url + ")";
            > > };
            > > oAutoComp.doBeforeExpandContainer = function(oTextbox, oContainer,
            > > sQuery, aResults) {
            > > var pos = YAHOO.util.Dom.getXY(oTextbox);
            > > pos[1] += YAHOO.util.Dom.get(oTextbox).offsetHeight;
            > > YAHOO.util.Dom.setXY(oContainer,pos);
            > > return true;
            > > };
            > >
            > >
            > >
            > >
            > > }
            > >
            > > YAHOO.util.Event.addListener("jsoninput1", "change", interceptLink);
            > >
            > > // END AUTOCOMPLETE
            > > //-->
            > > </script>
            > >
            >
          • fcko9
            Ok I m very close to getting the final results that I need. I m running into just one more problem. I would like the results to populate into my
            Message 5 of 10 , Apr 10, 2007
              Ok I'm very close to getting the final results that I need. I'm
              running into just one more problem. I would like the results to
              populate into my <SELECT name="AssignedTo"> instead of into the list
              <div id="jsonoutput2">

              I'm getting an error of
              oTextbox.select is not a function
              If I leave it populating jsonoutput2 then I click on one of the
              results. If I switch to AssignedTo I get no errors or anything it just
              seems to die. So I tried adding the for statement to populate my
              AssignedTo, but its dieing before it gets to it.

              Please help. Deadline is coming up fast on me.

              HTML
              <tr>
              <td>Department*</td>
              <td>
              <span id="json">
              <select name="DepartmentID" id="DepartmentID" class="DepartmentID">
              '.$DepartmentIDSelect.'
              </select>
              <div id="jsonoutput2"></div>
              <input type="text" name="employeeID" id="employeeID">
              </span>
              </td>
              </tr>
              <tr>
              <td>Assigned To</td>
              <td>
              <select name="AssignedTo" id="AssignedTo" class="AssignedTo">
              <option value="">--select--</option>
              </select>
              </td>
              </tr>

              JAVASCRIPT
              // START AUTOCOMPLETE
              YAHOO.example.ACJson = function(){
              var mylogger;
              var oACDS;
              var oAutoComp;
              var myServer = "ajaxresults/test.php";
              var mySchema = ["ResultSet.Result", "Title", "Summary", "Url",
              "ModificationDate", "MimeType"];

              return {
              init: function() {
              // Logger
              mylogger = new YAHOO.widget.LogReader("logger");

              oACDS = new YAHOO.widget.DS_XHR(myServer, mySchema);
              oACDS.queryMatchContains = true;
              oACDS.autoHighlight = false;
              oACDS.useShadow = true;
              oACDS.allowBrowserAutocomplete = false;
              oACDS.scriptQueryAppend = "output=json"; // Needed for YWS
              // Instantiate AutoComplete
              oAutoComp = new
              YAHOO.widget.AutoComplete("DepartmentID","AssignedTo", oACDS);



              var myHandler = function(type, args, me) {
              var oAutoComp = args[0]; // the autocomplete instance
              var elListItem = args[1]; // the result list item element
              var data1 = args[2][0];
              var data2 = args[2][1];
              var data3 = args[2][2];
              var data4 = args[2][3];
              var data5 = args[2][4];
              alert(args[0]);

              for(i=0; i< data2["Result2"].length; i++) {
              var myNewOption = new
              Option(data2["Result2"][i]["Test"],data2["Result2"][i]["Test"]);
              document.getElementById("AssignedTo").options[i] = myNewOption;
              }

              }
              oAutoComp.sendQuery(document.getElementById("DepartmentID").value);
              oAutoComp.itemSelectEvent.subscribe(myHandler);
              }
              };
              }();

              YAHOO.util.Event.addListener("DepartmentID",
              "change",YAHOO.example.ACJson.init);
              // END AUTOCOMPLETE








              --- In ydn-javascript@yahoogroups.com, "jennykhan" <jennyhan@...> wrote:
              >
              > Hi Jim,
              >
              > AutoComplete by nature is meant to be triggered by keystrokes. Are you
              > updating the value of the input box programmatically and expecting to
              > see results populate the container? If so, try calling somthing like
              > the following to programmatically trigger the query:
              >
              > oAutoComp.sendQuery(document.getElementById("EmployeeID").value);
              >
              > Hope that helps,
              > Jenny
              >
              >
              >
              > --- In ydn-javascript@yahoogroups.com, "fcko9" <jim@> wrote:
              > >
              > > --- In ydn-javascript@yahoogroups.com, "bdetarade"
              > > <benoit.de.tarade@> wrote:
              > > >
              > > > --- In ydn-javascript@yahoogroups.com, "THECREW" <jim@> wrote:
              > > > >
              > > > > --- In ydn-javascript@yahoogroups.com, "bdetarade"
              > > > > <benoit.de.tarade@> wrote:
              > > > > >
              > > > > > --- In ydn-javascript@yahoogroups.com, "THECREW" <jim@> wrote:
              > > > > > >
              > > > > > > Below is a modification to the states array example. What I'm
              > > trying
              > > > > > > to figure out is once
              > YAHOO.util.Event.addListener("statesinput",
              > > > > > > "blur", interceptLink);
              > > > > > > is triggered and inside interceptLink how can I get it to
              make a
              > > > call
              > > > > > > to a php file that will return a JSON result set that I can
              > > populate
              > > > > > > into a select field named testOption? I have tried several
              > > differn't
              > > > > > > ideas and they all have failed, can some one please give
              me some
              > > > > advise.
              > > > > > >
              > > > > > > Thanks
              > > > > > > Jim
              > > > > > >
              > > > > > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
              > > > > > > "http://www.w3.org/TR/html4/strict.dtd">
              > > > > > >
              > > > > > > <html>
              > > > > > >
              > > > > > > <head>
              > > > > > >
              > > > > > > <title>AutoComplete Widget :: JS Array Example</title>
              > > > > > >
              > > > > > > <link type="text/css" rel="stylesheet"
              > > > > > href="../../build/reset/reset.css">
              > > > > > > <link type="text/css" rel="stylesheet"
              > > > > > href="../../build/fonts/fonts.css">
              > > > > > > <link type="text/css" rel="stylesheet"
              > > > > > > href="../../build/logger/assets/logger.css">
              > > > > > > <link type="text/css" rel="stylesheet"
              > href="./css/examples.css">
              > > > > > > <link type="text/css" rel="stylesheet"
              > > > > > > href="../../docs/assets/dpSyntaxHighlighter.css">
              > > > > > >
              > > > > > > <style type="text/css">
              > > > > > > #statesmod {position:relative;}
              > > > > > > #statesautocomplete, #statesautocomplete2
              > > > > > > {position:relative;width:15em;margin-bottom:1em;}/* set
              width of
              > > > > > > widget here*/
              > > > > > > #statesautocomplete {z-index:9000} /* for IE z-index of
              > > absolute
              > > > > > > divs inside relative divs issue */
              > > > > > > #statesinput, #statesinput2
              > > {width:100%;height:1.4em;z-index:0;}
              > > > > > > #statescontainer, #statescontainer2
              > > > > > > {position:absolute;top:1.7em;width:100%}
              > > > > > > #statescontainer .yui-ac-content, #statescontainer2
              > > > > > > .yui-ac-content {position:absolute;width:100%;border:1px solid
              > > > > > > #404040;background:#fff;overflow:hidden;z-index:9050;}
              > > > > > > #statescontainer .yui-ac-shadow, #statescontainer2
              > > > .yui-ac-shadow
              > > > > > >
              > > > > >
              > > > >
              > > >
              > >
              >
              {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
              > > > > > > #statescontainer ul, #statescontainer2 ul {padding:5px
              > > > > > 0;width:100%;}
              > > > > > > #statescontainer li, #statescontainer2 li {padding:0
              > > > > > > 5px;cursor:default;white-space:nowrap;}
              > > > > > > #statescontainer li.yui-ac-highlight, #statescontainer2
              > > > > > > li.yui-ac-highlight {background:#ff0;}
              > > > > > > #statescontainer li.yui-ac-prehighlight,#statescontainer2
              > > > > > > li.yui-ac-prehighlight {background:#FFFFCC;}
              > > > > > > </style>
              > > > > > >
              > > > > > > </head>
              > > > > > >
              > > > > > > <body>
              > > > > > > <div id="hd">
              > > > > > > <h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a
              > > > > > > href="./">AutoComplete Widget</a> :: JavaScript Array</h1>
              > > > > > > </div>
              > > > > > >
              > > > > > > <div id="bd">
              > > > > > > <!-- Logger begins -->
              > > > > > > <div id="logger"></div>
              > > > > > > <!-- Logger ends -->
              > > > > > >
              > > > > > > <!-- AutoComplete begins -->
              > > > > > > <div id="statesmod">
              > > > > > > <form onsubmit="return
              > > > > YAHOO.example.ACJSArray.validateForm();">
              > > > > > > <h3>Find a state:</h3>
              > > > > > > <div id="statesautocomplete">
              > > > > > > <input id="statesinput">
              > > > > > > <div id="statescontainer"></div>
              > > > > > > </div>
              > > > > > >
              > > > > > > <select>
              > > > > > > <option>test</option>
              > > > > > > </select>
              > > > > > >
              > > > > > > </form>
              > > > > > > </div>
              > > > > > >
              > > > > > > <!-- AutoComplete ends -->
              > > > > > >
              > > > > > >
              > > > > > > <!-- Libary begins -->
              > > > > > > <script type="text/javascript"
              > > > > > src="../../build/yahoo/yahoo.js"></script>
              > > > > > > <script type="text/javascript"
              > > > src="../../build/dom/dom.js"></script>
              > > > > > > <script type="text/javascript"
              > > > > > > src="../../build/event/event-debug.js"></script>
              > > > > > > <script type="text/javascript"
              > > > > > > src="../../build/animation/animation.js"></script>
              > > > > > > <script type="text/javascript"
              > > > > > > src="../../build/autocomplete/autocomplete-debug.js"></script>
              > > > > > > <script type="text/javascript"
              > > > > > > src="../../build/logger/logger.js"></script>
              > > > > > > <!-- Library ends -->
              > > > > > >
              > > > > > >
              > > > > > >
              > > > > > > <!-- In-memory JS array begins-->
              > > > > > >
              > > > > > > <script type="text/javascript">
              > > > > > > var statesArray = [
              > > > > > > "Alabama",
              > > > > > > "Alaska",
              > > > > > > "Arizona",
              > > > > > > "Arkansas",
              > > > > > > "California",
              > > > > > > "Colorado",
              > > > > > > "Connecticut",
              > > > > > > "Delaware",
              > > > > > > "Florida",
              > > > > > > "Georgia",
              > > > > > > "Hawaii",
              > > > > > > "Idaho",
              > > > > > > "Illinois",
              > > > > > > "Indiana",
              > > > > > > "Iowa",
              > > > > > > "Kansas",
              > > > > > > "Kentucky",
              > > > > > > "Louisiana",
              > > > > > > "Maine",
              > > > > > > "Maryland",
              > > > > > > "Massachusetts",
              > > > > > > "Michigan",
              > > > > > > "Minnesota",
              > > > > > > "Mississippi",
              > > > > > > "Missouri",
              > > > > > > "Montana",
              > > > > > > "Nebraska",
              > > > > > > "Nevada",
              > > > > > > "New Hampshire",
              > > > > > > "New Jersey",
              > > > > > > "New Mexico",
              > > > > > > "New York",
              > > > > > > "North Dakota",
              > > > > > > "North Carolina",
              > > > > > > "Ohio",
              > > > > > > "Oklahoma",
              > > > > > > "Oregon",
              > > > > > > "Pennsylvania",
              > > > > > > "Rhode Island",
              > > > > > > "South Carolina",
              > > > > > > "South Dakota",
              > > > > > > "Tennessee",
              > > > > > > "Texas",
              > > > > > > "Utah",
              > > > > > > "Vermont",
              > > > > > > "Virginia",
              > > > > > > "Washington",
              > > > > > > "West Virginia",
              > > > > > > "Wisconsin",
              > > > > > > "Wyoming"
              > > > > > > ];
              > > > > > >
              > > > > > > </script>
              > > > > > >
              > > > > > > <!-- In-memory JS array ends-->
              > > > > > >
              > > > > > > <script type="text/javascript">
              > > > > > >
              > > > > > > YAHOO.example.ACJSArray = function() {
              > > > > > > var mylogger;
              > > > > > > var oACDS;
              > > > > > > var oAutoComp;
              > > > > > > return {
              > > > > > >
              > > > > > > init: function() {
              > > > > > > //Logger
              > > > > > > mylogger = new YAHOO.widget.LogReader("logger");
              > > > > > >
              > > > > > > // Instantiate first JS Array DataSource
              > > > > > > oACDS = new YAHOO.widget.DS_JSArray(statesArray);
              > > > > > >
              > > > > > > // Instantiate first AutoComplete
              > > > > > > oAutoComp = new
              > > > > > > YAHOO.widget.AutoComplete('statesinput','statescontainer',
              > oACDS);
              > > > > > > oAutoComp.queryDelay = 0;
              > > > > > > oAutoComp.prehighlightClassName =
              > > "yui-ac-prehighlight";
              > > > > > > oAutoComp.typeAhead = true;
              > > > > > > oAutoComp.useShadow = true;
              > > > > > >
              > > > > > > },
              > > > > > >
              > > > > > >
              > > > > > >
              > > > > > > validateForm: function() {
              > > > > > > // Validate form inputs here
              > > > > > > return false;
              > > > > > > }
              > > > > > > };
              > > > > > > }();
              > > > > > >
              > > > > > >
              > > > >
              > >
              YAHOO.util.Event.addListener(this,'load',YAHOO.example.ACJSArray.init);
              > > > > > >
              > > > > > >
              > > > > > >
              > > > > > > // Fill in data to secondary select/list
              > > > > > >
              > > > > > > var interceptLink = function(e) {
              > > > > > > YAHOO.util.Event.preventDefault(e);
              > > > > > > alert("You had an event happen on the Find a State
              > field.");
              > > > > > >
              > > > > > > }
              > > > > > >
              > > > > > > YAHOO.util.Event.addListener("statesinput", "blur",
              > > interceptLink);
              > > > > > >
              > > > > > >
              > > > > > > </script>
              > > > > > >
              > > > > > > <script type="text/javascript"
              > > > > > > src="../../docs/assets/dpSyntaxHighlighter.js"></script>
              > > > > > > <script type="text/javascript">
              > > > > > > dp.SyntaxHighlighter.HighlightAll('code');
              > > > > > > </script>
              > > > > > >
              > > > > > > </body>
              > > > > > > </html>
              > > > > > >
              > > > > >
              > > > > >
              > > > > > First I prefere DS_JSFunction to DS_JSArray.
              > > > > > Second, change your process init:
              > > > > > ../..
              > > > > > oAutoComp.typeAhead = true;
              > > > > > oAutoComp.useShadow = true;
              > > > > >
              > > > >
              > > >
              > >
              >
              oAutoComp.itemSelectEvent.subscribe(YAHOO.example.ACJSArray.myItemSelectEvent);
              > > > > > },
              > > > > >
              > > > > > myItemSelectEvent: function(oSelf, elItem, oData){
              > > > > > /*
              > > > > > Populate your select field with asynch request
              > > > > > */
              > > > > > }
              > > > > >
              > > > > > This is to prevent to many asynch request
              > > > > >
              > > > >
              > > > >
              > > > > Thank you for your response, but I don't think that is headed
              in the
              > > > > direction to resolve my issue. My first call is fine and opon
              > what is
              > > > > selected I need to collect that result and perform a second call
              > to a
              > > > > PHP script which sends a JSON result set back that will be
              populated
              > > > > into a <select><option> list. So with
              > > > >
              > > > > var interceptLink = function(e) {
              > > > > YAHOO.util.Event.preventDefault(e);
              > > > > alert("You had an event happen on the Find a State field.");
              > > > >
              > > > > }
              > > > >
              > > > > YAHOO.util.Event.addListener("statesinput", "blur",
              interceptLink);
              > > > >
              > > > > I'm able to gather the result from the first auto complete call,
              > what
              > > > > I'm having trouble with is getting it to make the second call
              out to
              > > > > the PHP script.
              > > > >
              > > >
              > > > Have you tried to use a YAHOO.widget.DS_XHR?
              > > >
              > >
              > > Ok I have tried this one more time and I'm still missing something I
              > > get inside the interceptLink and everything seems to be going fine
              > > there. I can get alerts, even have
              > > document.getElementById("jsonoutput").value =
              > > document.getElementById("EmployeeID").value;
              > >
              > > and it outputs the result from the first autocomplete. But when I try
              > > to get the second autocomplete to go I don't seem to get anything from
              > > it.
              > >
              > > My end goal is to have the EmployeeID from the first autocomplete
              > > result to call a second autocomplete that will put the results into a
              > > select list. I'm missing something and really need some help
              > >
              > > Thanks Jim
              > >
              > >
              > > <script type="text/javascript">
              > > <!--
              > > window.onload=function(){enableTooltips()};
              > >
              > > // START AUTOCOMPLETE
              > > YAHOO.example.ACJson = function(){
              > > var mylogger;
              > > var oACDS;
              > > var oAutoComp;
              > > var myServer = "ajaxresults/results.php";
              > > var mySchema = ["ResultSet.Result", "data1", "data2", "data3",
              > > "data4", "data5"];
              > >
              > > return {
              > > init: function() {
              > > // Logger
              > > mylogger = new YAHOO.widget.LogReader("logger");
              > >
              > > // Auto Complete
              > >
              > > oACDSEmployeeName = new YAHOO.widget.DS_XHR(myServer, mySchema);
              > > oACDSEmployeeName.scriptQueryAppend = "output=json&do=employeeName";
              > > // Needed for YWS
              > > oACDSEmployeeName.queryMatchContains = true;
              > > oACDSEmployeeName.autoHighlight = false;
              > > oACDSEmployeeName.useShadow = true;
              > > oACDSEmployeeName.allowBrowserAutocomplete = false;
              > > oACDSEmployeeName.maxResultsDisplayed = 100;
              > >
              > > // Instantiate AutoComplete
              > > oAutoCompEmployeeName = new
              > > YAHOO.widget.AutoComplete("jsoninput1","jsonoutput1",
              > oACDSEmployeeName);
              > > oAutoCompEmployeeName.useIFrame = true;
              > >
              > > var myHandler = function(type, args, me) {
              > > var oAutoCompEmployeeName = args[0]; // the autocomplete instance
              > > var elListItem = args[1]; // the result list item element
              > > var data1 = args[2][0];
              > > var data2 = args[2][1];
              > > var data3 = args[2][2];
              > > var data4 = args[2][3];
              > > var data5 = args[2][4];
              > > document.getElementById("EmployeeID").value = data3; // Set data into
              > > employeeID form field
              > > }
              > > oAutoCompEmployeeName.itemSelectEvent.subscribe(myHandler);
              > > },
              > >
              > > validateForm: function() {
              > > // Validate form inputs here
              > > return false;
              > > }
              > > };
              > > }();
              > >
              > > YAHOO.util.Event.addListener(this,"load",YAHOO.example.ACJson.init);
              > >
              > > // Fill in data to secondary select/list
              > >
              > >
              > > var interceptLink = function(e) {
              > > YAHOO.util.Event.preventDefault(e);
              > > alert("You had an event happen on the Employee Name AutoComplete
              > > text field.");
              > > //document.getElementById("jsonoutput").value =
              > > document.getElementById("EmployeeID").value;
              > >
              > >
              > > oACDS = new YAHOO.widget.DS_XHR("ajaxresults/test.php",
              > > ["ResultSet.Result","title"]);
              > > oACDS.queryMatchContains = true;
              > > oACDS.scriptQueryAppend = "output=json&results=100"; // Needed
              for YWS
              > > // Instantiate AutoComplete
              > > oAutoComp = new YAHOO.widget.AutoComplete("EmployeeID","jsonoutput",
              > > oACDS);
              > > oAutoComp.useShadow = true;
              > > oAutoComp.alwaysShowContainer = true;
              > >
              > > oAutoComp.formatResult = function(oResultItem, sQuery) {
              > > alert (oResultItem[1].Title + " (" + oResultItem[1].Url + ")");
              > > return oResultItem[1].Title + " (" + oResultItem[1].Url + ")";
              > > };
              > > oAutoComp.doBeforeExpandContainer = function(oTextbox, oContainer,
              > > sQuery, aResults) {
              > > var pos = YAHOO.util.Dom.getXY(oTextbox);
              > > pos[1] += YAHOO.util.Dom.get(oTextbox).offsetHeight;
              > > YAHOO.util.Dom.setXY(oContainer,pos);
              > > return true;
              > > };
              > >
              > >
              > >
              > >
              > > }
              > >
              > > YAHOO.util.Event.addListener("jsoninput1", "change", interceptLink);
              > >
              > > // END AUTOCOMPLETE
              > > //-->
              > > </script>
              > >
              >
            • fcko9
              Ok I m very close to getting the final results that I need. I m running into just one more problem. I would like the results to populate into my
              Message 6 of 10 , Apr 19, 2007
                Ok I'm very close to getting the final results that I need. I'm
                running into just one more problem. I would like the results to
                populate into my <SELECT name="AssignedTo"> instead of into the list
                <div id="jsonoutput2">

                I'm getting an error of
                oTextbox.select is not a function
                If I leave it populating jsonoutput2 then I click on one of the
                results. If I switch to AssignedTo I get no errors or anything it just
                seems to die. So I tried adding the for statement to populate my
                AssignedTo, but its dieing before it gets to it.

                Please help.

                HTML
                <tr>
                <td>Department*</td>
                <td>
                <span id="json">
                <select name="DepartmentID" id="DepartmentID" class="DepartmentID">
                '.$DepartmentIDSelect.'
                </select>
                <div id="jsonoutput2"></div>
                <input type="text" name="employeeID" id="employeeID">
                </span>
                </td>
                </tr>
                <tr>
                <td>Assigned To</td>
                <td>
                <select name="AssignedTo" id="AssignedTo" class="AssignedTo">
                <option value="">--select--</option>
                </select>
                </td>
                </tr>

                JAVASCRIPT
                // START AUTOCOMPLETE
                YAHOO.example.ACJson = function(){
                var mylogger;
                var oACDS;
                var oAutoComp;
                var myServer = "ajaxresults/test.php";
                var mySchema = ["ResultSet.Result", "Title", "Summary", "Url",
                "ModificationDate", "MimeType"];

                return {
                init: function() {
                // Logger
                mylogger = new YAHOO.widget.LogReader("logger");

                oACDS = new YAHOO.widget.DS_XHR(myServer, mySchema);
                oACDS.queryMatchContains = true;
                oACDS.autoHighlight = false;
                oACDS.useShadow = true;
                oACDS.allowBrowserAutocomplete = false;
                oACDS.scriptQueryAppend = "output=json"; // Needed for YWS
                // Instantiate AutoComplete
                oAutoComp = new
                YAHOO.widget.AutoComplete("DepartmentID","AssignedTo", oACDS);



                var myHandler = function(type, args, me) {
                var oAutoComp = args[0]; // the autocomplete instance
                var elListItem = args[1]; // the result list item element
                var data1 = args[2][0];
                var data2 = args[2][1];
                var data3 = args[2][2];
                var data4 = args[2][3];
                var data5 = args[2][4];
                alert(args[0]);

                for(i=0; i< data2["Result2"].length; i++) {
                var myNewOption = new
                Option(data2["Result2"][i]["Test"],data2["Result2"][i]["Test"]);
                document.getElementById("AssignedTo").options[i] = myNewOption;
                }

                }
                oAutoComp.sendQuery(document.getElementById("DepartmentID").value);
                oAutoComp.itemSelectEvent.subscribe(myHandler);
                }
                };
                }();

                YAHOO.util.Event.addListener("DepartmentID",
                "change",YAHOO.example.ACJson.init);
                // END AUTOCOMPLETE







                --- In ydn-javascript@yahoogroups.com, "fcko9" <jim@...> wrote:
                >
                > Ok I'm very close to getting the final results that I need. I'm
                > running into just one more problem. I would like the results to
                > populate into my <SELECT name="AssignedTo"> instead of into the list
                > <div id="jsonoutput2">
                >
                > I'm getting an error of
                > oTextbox.select is not a function
                > If I leave it populating jsonoutput2 then I click on one of the
                > results. If I switch to AssignedTo I get no errors or anything it just
                > seems to die. So I tried adding the for statement to populate my
                > AssignedTo, but its dieing before it gets to it.
                >
                > Please help. Deadline is coming up fast on me.
                >
                > HTML
                > <tr>
                > <td>Department*</td>
                > <td>
                > <span id="json">
                > <select name="DepartmentID" id="DepartmentID" class="DepartmentID">
                > '.$DepartmentIDSelect.'
                > </select>
                > <div id="jsonoutput2"></div>
                > <input type="text" name="employeeID" id="employeeID">
                > </span>
                > </td>
                > </tr>
                > <tr>
                > <td>Assigned To</td>
                > <td>
                > <select name="AssignedTo" id="AssignedTo" class="AssignedTo">
                > <option value="">--select--</option>
                > </select>
                > </td>
                > </tr>
                >
                > JAVASCRIPT
                > // START AUTOCOMPLETE
                > YAHOO.example.ACJson = function(){
                > var mylogger;
                > var oACDS;
                > var oAutoComp;
                > var myServer = "ajaxresults/test.php";
                > var mySchema = ["ResultSet.Result", "Title", "Summary", "Url",
                > "ModificationDate", "MimeType"];
                >
                > return {
                > init: function() {
                > // Logger
                > mylogger = new YAHOO.widget.LogReader("logger");
                >
                > oACDS = new YAHOO.widget.DS_XHR(myServer, mySchema);
                > oACDS.queryMatchContains = true;
                > oACDS.autoHighlight = false;
                > oACDS.useShadow = true;
                > oACDS.allowBrowserAutocomplete = false;
                > oACDS.scriptQueryAppend = "output=json"; // Needed for YWS
                > // Instantiate AutoComplete
                > oAutoComp = new
                > YAHOO.widget.AutoComplete("DepartmentID","AssignedTo", oACDS);
                >
                >
                >
                > var myHandler = function(type, args, me) {
                > var oAutoComp = args[0]; // the autocomplete instance
                > var elListItem = args[1]; // the result list item element
                > var data1 = args[2][0];
                > var data2 = args[2][1];
                > var data3 = args[2][2];
                > var data4 = args[2][3];
                > var data5 = args[2][4];
                > alert(args[0]);
                >
                > for(i=0; i< data2["Result2"].length; i++) {
                > var myNewOption = new
                > Option(data2["Result2"][i]["Test"],data2["Result2"][i]["Test"]);
                > document.getElementById("AssignedTo").options[i] = myNewOption;
                > }
                >
                > }
                > oAutoComp.sendQuery(document.getElementById("DepartmentID").value);
                > oAutoComp.itemSelectEvent.subscribe(myHandler);
                > }
                > };
                > }();
                >
                > YAHOO.util.Event.addListener("DepartmentID",
                > "change",YAHOO.example.ACJson.init);
                > // END AUTOCOMPLETE
                >
                >
                >
                >
                >
                >
                >
                >
                > --- In ydn-javascript@yahoogroups.com, "jennykhan" <jennyhan@> wrote:
                > >
                > > Hi Jim,
                > >
                > > AutoComplete by nature is meant to be triggered by keystrokes. Are you
                > > updating the value of the input box programmatically and expecting to
                > > see results populate the container? If so, try calling somthing like
                > > the following to programmatically trigger the query:
                > >
                > > oAutoComp.sendQuery(document.getElementById("EmployeeID").value);
                > >
                > > Hope that helps,
                > > Jenny
                > >
                > >
                > >
                > > --- In ydn-javascript@yahoogroups.com, "fcko9" <jim@> wrote:
                > > >
                > > > --- In ydn-javascript@yahoogroups.com, "bdetarade"
                > > > <benoit.de.tarade@> wrote:
                > > > >
                > > > > --- In ydn-javascript@yahoogroups.com, "THECREW" <jim@> wrote:
                > > > > >
                > > > > > --- In ydn-javascript@yahoogroups.com, "bdetarade"
                > > > > > <benoit.de.tarade@> wrote:
                > > > > > >
                > > > > > > --- In ydn-javascript@yahoogroups.com, "THECREW" <jim@> wrote:
                > > > > > > >
                > > > > > > > Below is a modification to the states array example.
                What I'm
                > > > trying
                > > > > > > > to figure out is once
                > > YAHOO.util.Event.addListener("statesinput",
                > > > > > > > "blur", interceptLink);
                > > > > > > > is triggered and inside interceptLink how can I get it to
                > make a
                > > > > call
                > > > > > > > to a php file that will return a JSON result set that I can
                > > > populate
                > > > > > > > into a select field named testOption? I have tried several
                > > > differn't
                > > > > > > > ideas and they all have failed, can some one please give
                > me some
                > > > > > advise.
                > > > > > > >
                > > > > > > > Thanks
                > > > > > > > Jim
                > > > > > > >
                > > > > > > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                > > > > > > > "http://www.w3.org/TR/html4/strict.dtd">
                > > > > > > >
                > > > > > > > <html>
                > > > > > > >
                > > > > > > > <head>
                > > > > > > >
                > > > > > > > <title>AutoComplete Widget :: JS Array Example</title>
                > > > > > > >
                > > > > > > > <link type="text/css" rel="stylesheet"
                > > > > > > href="../../build/reset/reset.css">
                > > > > > > > <link type="text/css" rel="stylesheet"
                > > > > > > href="../../build/fonts/fonts.css">
                > > > > > > > <link type="text/css" rel="stylesheet"
                > > > > > > > href="../../build/logger/assets/logger.css">
                > > > > > > > <link type="text/css" rel="stylesheet"
                > > href="./css/examples.css">
                > > > > > > > <link type="text/css" rel="stylesheet"
                > > > > > > > href="../../docs/assets/dpSyntaxHighlighter.css">
                > > > > > > >
                > > > > > > > <style type="text/css">
                > > > > > > > #statesmod {position:relative;}
                > > > > > > > #statesautocomplete, #statesautocomplete2
                > > > > > > > {position:relative;width:15em;margin-bottom:1em;}/* set
                > width of
                > > > > > > > widget here*/
                > > > > > > > #statesautocomplete {z-index:9000} /* for IE z-index of
                > > > absolute
                > > > > > > > divs inside relative divs issue */
                > > > > > > > #statesinput, #statesinput2
                > > > {width:100%;height:1.4em;z-index:0;}
                > > > > > > > #statescontainer, #statescontainer2
                > > > > > > > {position:absolute;top:1.7em;width:100%}
                > > > > > > > #statescontainer .yui-ac-content, #statescontainer2
                > > > > > > > .yui-ac-content {position:absolute;width:100%;border:1px
                solid
                > > > > > > > #404040;background:#fff;overflow:hidden;z-index:9050;}
                > > > > > > > #statescontainer .yui-ac-shadow, #statescontainer2
                > > > > .yui-ac-shadow
                > > > > > > >
                > > > > > >
                > > > > >
                > > > >
                > > >
                > >
                >
                {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
                > > > > > > > #statescontainer ul, #statescontainer2 ul {padding:5px
                > > > > > > 0;width:100%;}
                > > > > > > > #statescontainer li, #statescontainer2 li {padding:0
                > > > > > > > 5px;cursor:default;white-space:nowrap;}
                > > > > > > > #statescontainer li.yui-ac-highlight, #statescontainer2
                > > > > > > > li.yui-ac-highlight {background:#ff0;}
                > > > > > > > #statescontainer
                li.yui-ac-prehighlight,#statescontainer2
                > > > > > > > li.yui-ac-prehighlight {background:#FFFFCC;}
                > > > > > > > </style>
                > > > > > > >
                > > > > > > > </head>
                > > > > > > >
                > > > > > > > <body>
                > > > > > > > <div id="hd">
                > > > > > > > <h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a
                > > > > > > > href="./">AutoComplete Widget</a> :: JavaScript Array</h1>
                > > > > > > > </div>
                > > > > > > >
                > > > > > > > <div id="bd">
                > > > > > > > <!-- Logger begins -->
                > > > > > > > <div id="logger"></div>
                > > > > > > > <!-- Logger ends -->
                > > > > > > >
                > > > > > > > <!-- AutoComplete begins -->
                > > > > > > > <div id="statesmod">
                > > > > > > > <form onsubmit="return
                > > > > > YAHOO.example.ACJSArray.validateForm();">
                > > > > > > > <h3>Find a state:</h3>
                > > > > > > > <div id="statesautocomplete">
                > > > > > > > <input id="statesinput">
                > > > > > > > <div id="statescontainer"></div>
                > > > > > > > </div>
                > > > > > > >
                > > > > > > > <select>
                > > > > > > > <option>test</option>
                > > > > > > > </select>
                > > > > > > >
                > > > > > > > </form>
                > > > > > > > </div>
                > > > > > > >
                > > > > > > > <!-- AutoComplete ends -->
                > > > > > > >
                > > > > > > >
                > > > > > > > <!-- Libary begins -->
                > > > > > > > <script type="text/javascript"
                > > > > > > src="../../build/yahoo/yahoo.js"></script>
                > > > > > > > <script type="text/javascript"
                > > > > src="../../build/dom/dom.js"></script>
                > > > > > > > <script type="text/javascript"
                > > > > > > > src="../../build/event/event-debug.js"></script>
                > > > > > > > <script type="text/javascript"
                > > > > > > > src="../../build/animation/animation.js"></script>
                > > > > > > > <script type="text/javascript"
                > > > > > > >
                src="../../build/autocomplete/autocomplete-debug.js"></script>
                > > > > > > > <script type="text/javascript"
                > > > > > > > src="../../build/logger/logger.js"></script>
                > > > > > > > <!-- Library ends -->
                > > > > > > >
                > > > > > > >
                > > > > > > >
                > > > > > > > <!-- In-memory JS array begins-->
                > > > > > > >
                > > > > > > > <script type="text/javascript">
                > > > > > > > var statesArray = [
                > > > > > > > "Alabama",
                > > > > > > > "Alaska",
                > > > > > > > "Arizona",
                > > > > > > > "Arkansas",
                > > > > > > > "California",
                > > > > > > > "Colorado",
                > > > > > > > "Connecticut",
                > > > > > > > "Delaware",
                > > > > > > > "Florida",
                > > > > > > > "Georgia",
                > > > > > > > "Hawaii",
                > > > > > > > "Idaho",
                > > > > > > > "Illinois",
                > > > > > > > "Indiana",
                > > > > > > > "Iowa",
                > > > > > > > "Kansas",
                > > > > > > > "Kentucky",
                > > > > > > > "Louisiana",
                > > > > > > > "Maine",
                > > > > > > > "Maryland",
                > > > > > > > "Massachusetts",
                > > > > > > > "Michigan",
                > > > > > > > "Minnesota",
                > > > > > > > "Mississippi",
                > > > > > > > "Missouri",
                > > > > > > > "Montana",
                > > > > > > > "Nebraska",
                > > > > > > > "Nevada",
                > > > > > > > "New Hampshire",
                > > > > > > > "New Jersey",
                > > > > > > > "New Mexico",
                > > > > > > > "New York",
                > > > > > > > "North Dakota",
                > > > > > > > "North Carolina",
                > > > > > > > "Ohio",
                > > > > > > > "Oklahoma",
                > > > > > > > "Oregon",
                > > > > > > > "Pennsylvania",
                > > > > > > > "Rhode Island",
                > > > > > > > "South Carolina",
                > > > > > > > "South Dakota",
                > > > > > > > "Tennessee",
                > > > > > > > "Texas",
                > > > > > > > "Utah",
                > > > > > > > "Vermont",
                > > > > > > > "Virginia",
                > > > > > > > "Washington",
                > > > > > > > "West Virginia",
                > > > > > > > "Wisconsin",
                > > > > > > > "Wyoming"
                > > > > > > > ];
                > > > > > > >
                > > > > > > > </script>
                > > > > > > >
                > > > > > > > <!-- In-memory JS array ends-->
                > > > > > > >
                > > > > > > > <script type="text/javascript">
                > > > > > > >
                > > > > > > > YAHOO.example.ACJSArray = function() {
                > > > > > > > var mylogger;
                > > > > > > > var oACDS;
                > > > > > > > var oAutoComp;
                > > > > > > > return {
                > > > > > > >
                > > > > > > > init: function() {
                > > > > > > > //Logger
                > > > > > > > mylogger = new YAHOO.widget.LogReader("logger");
                > > > > > > >
                > > > > > > > // Instantiate first JS Array DataSource
                > > > > > > > oACDS = new
                YAHOO.widget.DS_JSArray(statesArray);
                > > > > > > >
                > > > > > > > // Instantiate first AutoComplete
                > > > > > > > oAutoComp = new
                > > > > > > > YAHOO.widget.AutoComplete('statesinput','statescontainer',
                > > oACDS);
                > > > > > > > oAutoComp.queryDelay = 0;
                > > > > > > > oAutoComp.prehighlightClassName =
                > > > "yui-ac-prehighlight";
                > > > > > > > oAutoComp.typeAhead = true;
                > > > > > > > oAutoComp.useShadow = true;
                > > > > > > >
                > > > > > > > },
                > > > > > > >
                > > > > > > >
                > > > > > > >
                > > > > > > > validateForm: function() {
                > > > > > > > // Validate form inputs here
                > > > > > > > return false;
                > > > > > > > }
                > > > > > > > };
                > > > > > > > }();
                > > > > > > >
                > > > > > > >
                > > > > >
                > > >
                > YAHOO.util.Event.addListener(this,'load',YAHOO.example.ACJSArray.init);
                > > > > > > >
                > > > > > > >
                > > > > > > >
                > > > > > > > // Fill in data to secondary select/list
                > > > > > > >
                > > > > > > > var interceptLink = function(e) {
                > > > > > > > YAHOO.util.Event.preventDefault(e);
                > > > > > > > alert("You had an event happen on the Find a State
                > > field.");
                > > > > > > >
                > > > > > > > }
                > > > > > > >
                > > > > > > > YAHOO.util.Event.addListener("statesinput", "blur",
                > > > interceptLink);
                > > > > > > >
                > > > > > > >
                > > > > > > > </script>
                > > > > > > >
                > > > > > > > <script type="text/javascript"
                > > > > > > > src="../../docs/assets/dpSyntaxHighlighter.js"></script>
                > > > > > > > <script type="text/javascript">
                > > > > > > > dp.SyntaxHighlighter.HighlightAll('code');
                > > > > > > > </script>
                > > > > > > >
                > > > > > > > </body>
                > > > > > > > </html>
                > > > > > > >
                > > > > > >
                > > > > > >
                > > > > > > First I prefere DS_JSFunction to DS_JSArray.
                > > > > > > Second, change your process init:
                > > > > > > ../..
                > > > > > > oAutoComp.typeAhead = true;
                > > > > > > oAutoComp.useShadow = true;
                > > > > > >
                > > > > >
                > > > >
                > > >
                > >
                >
                oAutoComp.itemSelectEvent.subscribe(YAHOO.example.ACJSArray.myItemSelectEvent);
                > > > > > > },
                > > > > > >
                > > > > > > myItemSelectEvent: function(oSelf, elItem, oData){
                > > > > > > /*
                > > > > > > Populate your select field with asynch request
                > > > > > > */
                > > > > > > }
                > > > > > >
                > > > > > > This is to prevent to many asynch request
                > > > > > >
                > > > > >
                > > > > >
                > > > > > Thank you for your response, but I don't think that is headed
                > in the
                > > > > > direction to resolve my issue. My first call is fine and opon
                > > what is
                > > > > > selected I need to collect that result and perform a second call
                > > to a
                > > > > > PHP script which sends a JSON result set back that will be
                > populated
                > > > > > into a <select><option> list. So with
                > > > > >
                > > > > > var interceptLink = function(e) {
                > > > > > YAHOO.util.Event.preventDefault(e);
                > > > > > alert("You had an event happen on the Find a State
                field.");
                > > > > >
                > > > > > }
                > > > > >
                > > > > > YAHOO.util.Event.addListener("statesinput", "blur",
                > interceptLink);
                > > > > >
                > > > > > I'm able to gather the result from the first auto complete call,
                > > what
                > > > > > I'm having trouble with is getting it to make the second call
                > out to
                > > > > > the PHP script.
                > > > > >
                > > > >
                > > > > Have you tried to use a YAHOO.widget.DS_XHR?
                > > > >
                > > >
                > > > Ok I have tried this one more time and I'm still missing something I
                > > > get inside the interceptLink and everything seems to be going fine
                > > > there. I can get alerts, even have
                > > > document.getElementById("jsonoutput").value =
                > > > document.getElementById("EmployeeID").value;
                > > >
                > > > and it outputs the result from the first autocomplete. But when
                I try
                > > > to get the second autocomplete to go I don't seem to get
                anything from
                > > > it.
                > > >
                > > > My end goal is to have the EmployeeID from the first autocomplete
                > > > result to call a second autocomplete that will put the results
                into a
                > > > select list. I'm missing something and really need some help
                > > >
                > > > Thanks Jim
                > > >
                > > >
                > > > <script type="text/javascript">
                > > > <!--
                > > > window.onload=function(){enableTooltips()};
                > > >
                > > > // START AUTOCOMPLETE
                > > > YAHOO.example.ACJson = function(){
                > > > var mylogger;
                > > > var oACDS;
                > > > var oAutoComp;
                > > > var myServer = "ajaxresults/results.php";
                > > > var mySchema = ["ResultSet.Result", "data1", "data2", "data3",
                > > > "data4", "data5"];
                > > >
                > > > return {
                > > > init: function() {
                > > > // Logger
                > > > mylogger = new YAHOO.widget.LogReader("logger");
                > > >
                > > > // Auto Complete
                > > >
                > > > oACDSEmployeeName = new YAHOO.widget.DS_XHR(myServer, mySchema);
                > > > oACDSEmployeeName.scriptQueryAppend =
                "output=json&do=employeeName";
                > > > // Needed for YWS
                > > > oACDSEmployeeName.queryMatchContains = true;
                > > > oACDSEmployeeName.autoHighlight = false;
                > > > oACDSEmployeeName.useShadow = true;
                > > > oACDSEmployeeName.allowBrowserAutocomplete = false;
                > > > oACDSEmployeeName.maxResultsDisplayed = 100;
                > > >
                > > > // Instantiate AutoComplete
                > > > oAutoCompEmployeeName = new
                > > > YAHOO.widget.AutoComplete("jsoninput1","jsonoutput1",
                > > oACDSEmployeeName);
                > > > oAutoCompEmployeeName.useIFrame = true;
                > > >
                > > > var myHandler = function(type, args, me) {
                > > > var oAutoCompEmployeeName = args[0]; // the autocomplete instance
                > > > var elListItem = args[1]; // the result list item element
                > > > var data1 = args[2][0];
                > > > var data2 = args[2][1];
                > > > var data3 = args[2][2];
                > > > var data4 = args[2][3];
                > > > var data5 = args[2][4];
                > > > document.getElementById("EmployeeID").value = data3; // Set
                data into
                > > > employeeID form field
                > > > }
                > > > oAutoCompEmployeeName.itemSelectEvent.subscribe(myHandler);
                > > > },
                > > >
                > > > validateForm: function() {
                > > > // Validate form inputs here
                > > > return false;
                > > > }
                > > > };
                > > > }();
                > > >
                > > > YAHOO.util.Event.addListener(this,"load",YAHOO.example.ACJson.init);
                > > >
                > > > // Fill in data to secondary select/list
                > > >
                > > >
                > > > var interceptLink = function(e) {
                > > > YAHOO.util.Event.preventDefault(e);
                > > > alert("You had an event happen on the Employee Name
                AutoComplete
                > > > text field.");
                > > > //document.getElementById("jsonoutput").value =
                > > > document.getElementById("EmployeeID").value;
                > > >
                > > >
                > > > oACDS = new YAHOO.widget.DS_XHR("ajaxresults/test.php",
                > > > ["ResultSet.Result","title"]);
                > > > oACDS.queryMatchContains = true;
                > > > oACDS.scriptQueryAppend = "output=json&results=100"; // Needed
                > for YWS
                > > > // Instantiate AutoComplete
                > > > oAutoComp = new
                YAHOO.widget.AutoComplete("EmployeeID","jsonoutput",
                > > > oACDS);
                > > > oAutoComp.useShadow = true;
                > > > oAutoComp.alwaysShowContainer = true;
                > > >
                > > > oAutoComp.formatResult = function(oResultItem, sQuery) {
                > > > alert (oResultItem[1].Title + " (" + oResultItem[1].Url + ")");
                > > > return oResultItem[1].Title + " (" + oResultItem[1].Url + ")";
                > > > };
                > > > oAutoComp.doBeforeExpandContainer = function(oTextbox, oContainer,
                > > > sQuery, aResults) {
                > > > var pos = YAHOO.util.Dom.getXY(oTextbox);
                > > > pos[1] += YAHOO.util.Dom.get(oTextbox).offsetHeight;
                > > > YAHOO.util.Dom.setXY(oContainer,pos);
                > > > return true;
                > > > };
                > > >
                > > >
                > > >
                > > >
                > > > }
                > > >
                > > > YAHOO.util.Event.addListener("jsoninput1", "change", interceptLink);
                > > >
                > > > // END AUTOCOMPLETE
                > > > //-->
                > > > </script>
                > > >
                > >
                >
              Your message has been successfully submitted and would be delivered to recipients shortly.