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

Secondary Select with Auto Complete

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

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

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

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

              Thanks Jim


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

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

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

              // Auto Complete

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

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

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

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

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

              // Fill in data to secondary select/list


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


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

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




              }

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

              // END AUTOCOMPLETE
              //-->
              </script>
            • bdetarade
              I don t know if the issue come from that, but you set a new autocomplet widget for every change. I put my code. Therefore ther i another issue. When I select a
              Message 6 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 7 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 8 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 9 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 10 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.