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

Re: Secondary Select with Auto Complete

Expand Messages
  • 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 1 of 10 , Apr 1, 2007
    • 0 Attachment
      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 2 of 10 , Apr 9, 2007
      • 0 Attachment
        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 3 of 10 , Apr 10, 2007
        • 0 Attachment
          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 4 of 10 , Apr 10, 2007
          • 0 Attachment
            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 5 of 10 , Apr 19, 2007
            • 0 Attachment
              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.