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

Having problems with AutoComplete with XHR Datasource ...

Expand Messages
  • vishalhkd007
    I am trying to use AutoComplete with XHR datasource returning JSON results. However, the autocomplete shows nothing even though the firebug plugin shows the
    Message 1 of 2 , Feb 2, 2009
    • 0 Attachment
      I am trying to use AutoComplete with XHR datasource returning JSON
      results.

      However, the autocomplete shows nothing even though the firebug plugin
      shows the request being sent and response JSON object correctly received.

      Here is my HTML snippet ...

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd" >
      <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <title>Basic Remote Data</title>

      <style type="text/css">
      /*margin and padding on body element
      can introduce errors in determining
      element position and are not recommended;
      we turn them off as a foundation for YUI
      CSS treatments. */
      body {
      margin:0;
      padding:0;
      }
      </style>

      <link rel="stylesheet" type="text/css"
      href="/js/yui/build/fonts/fonts-min.css" />
      <link rel="stylesheet" type="text/css"
      href="/js/yui/build/autocomplete/assets/skins/sam/autocomplete.css" />

      <script type="text/javascript"
      src="/js/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
      <script type="text/javascript"
      src="/js/yui/build/container/container_core.js"></script>

      <script type="text/javascript"
      src="/js/yui/build/element/element-beta.js"></script>
      <script type="text/javascript"
      src="/js/yui/build/animation/animation.js"></script>
      <script type="text/javascript"
      src="/js/yui/build/connection/connection.js"></script>
      <script type="text/javascript" src="/js/yui/build/json/json.js"></script>
      <script type="text/javascript"
      src="/js/yui/build/datasource/datasource-debug.js"></script>
      <script type="text/javascript"
      src="/js/yui/build/autocomplete/autocomplete-debug.js"></script>

      <!--begin custom header content for this example-->
      <style type="text/css">
      #myAutoComplete {
      width:40em; /* set width here or else widget will expand to fit
      its container */
      padding-bottom:2em;
      }
      </style>


      <!--end custom header content for this example-->

      </head>

      <body class=" yui-skin-sam">


      <h1>Basic Remote Data</h1>

      <div class="exampleIntro">

      <p>This AutoComplete implementation points to an online script that
      serves a data as delimited plain text. Enabling caching on the
      DataSource can reduce trips to the server and speed performance for
      repeated queries.</p>

      </div>

      <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

      <h3>Search our database:</h3>

      <div id="myAutoComplete">
      <input id="myInput" type="text" />
      <div id="myContainer"></div>
      </div>

      <script type="text/javascript">
      YAHOO.example.BasicRemote = function() {
      // Use an XHRDataSource
      var oDS = new YAHOO.util.XHRDataSource("/rest/globalSearch/suggest");
      oDS.responseType = YAHOO.util.XHRDataSource.TYPE_JSON;
      oDS.responseSchema = {
      resultsList: "SuggestionsList.Suggestions",
      fields:["value"]
      };

      // Instantiate the AutoComplete
      var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer",
      oDS);

      oAC.generateRequest = function(sQuery) {
      return
      "?N=0&wildcard=true&maxResults=10&lookaheadSearchTerms=" +
      sQuery;
      };

      oAC.doBeforeExpandContainer = function(oTextbox, oContainer,
      sQuery, aResults) {
      var pos = YAHOO.util.Dom.getXY(oTextbox);
      pos[1] += YAHOO.util.Dom.get(oTextbox).offsetHeight + 2;
      YAHOO.util.Dom.setXY(oContainer,pos);
      alert(aResults[0].value);
      return true;
      };

      return {
      oDS: oDS,
      oAC: oAC
      };
      }();
      </script>
      </body>
      </html>


      Also, hers is the output from the request to the server for the data

      ....loading....
      Firebug's log limit has been reached. %S entries not shown. Preferences
      GET
      http://localhost:8080/rest/globalSearch/suggest?N=...wildcard=true&maxResults=10&lookaheadSearchTerms=A
      http://localhost:8080/rest/globalSearch/suggest?N=0&wildcard=true&maxResults=10&lookaheadSearchTerms=A

      200 OK
      36ms firebug-...server.js (line 103)
      ParamsHeadersPostPutResponseCache
      Response Headers
      Request Headers

      {SuggestionsList:
      {
      TotalNumRecs:18,
      Suggestions:[
      {

      "dimVal":"4294910742",
      "key":"dataset",
      "value":"Accommodation and Food Services: Miscellaneous
      Subjects: Establishments Using a Trade
      Name Authorized by Franchisor: 1997"
      }
      , {

      "dimVal":"4294909395",
      "key":"dataset",
      "value":"Accommodation and Food Services: Subject Series - Misc
      Subjects: Establishments Using
      a Trade Name Authorized by Franchisor for the United States and
      States: 2002"
      }
      , {

      "dimVal":"4294911546",
      "key":"dataset",
      "value":"Construction: Geographic Area Series: Detailed
      Statistics for Establishments With Payroll
      (Pt.A): 1997"
      }
      , {

      "dimVal":"4294911519",
      "key":"dataset",
      "value":"Construction: Geographic Area Summary: Detailed
      Statistics for Establishments With Payroll
      (Pt.A): 1997"
      }
      , {

      "dimVal":"4294911483",
      "key":"dataset",
      "value":"Construction: Industry Series: Detailed Statistics for
      Establishments With Payroll (Pt
      .A): 1997"
      }
      , {

      "dimVal":"4294911450",
      "key":"dataset",
      "value":"Construction: Industry Summary: Detailed Statistics
      for Establishments With Payroll by
      Industry Group (Pt.A): 1997"
      }
      , {

      "dimVal":"4294949922",
      "key":"product_number",
      "value":"GCT-PL-a"
      }
      , {

      "dimVal":"4294937004",
      "key":"product_number",
      "value":"PHC4-A-T1"
      }
      , {

      "dimVal":"4294937026",
      "key":"product_number",
      "value":"PHC4-A-T10"
      }
      , {

      "dimVal":"4294937022",
      "key":"product_number",
      "value":"PHC4-A-T11"
      }
      , {

      "dimVal":"4294937020",
      "key":"product_number",
      "value":"PHC4-A-T12"
      }
      , {

      "dimVal":"4294937018",
      "key":"product_number",
      "value":"PHC4-A-T13"
      }
      , {

      "dimVal":"4294937016",
      "key":"product_number",
      "value":"PHC4-A-T14"
      }
      , {

      "dimVal":"4294937014",
      "key":"product_number",
      "value":"PHC4-A-T15"
      }
      , {

      "dimVal":"4294937012",
      "key":"product_number",
      "value":"PHC4-A-T16"
      }
      , {

      "dimVal":"4294937010",
      "key":"product_number",
      "value":"PHC4-A-T17"
      }
      , {

      "dimVal":"4294953542",
      "key":"subject",
      "value":"A�o en el cual el Jefe de Hogar Se Mud� a la Unidad"
      }
      , {

      "dimVal":"4294951357",
      "key":"subject",
      "value":"Condici�n de Empleo (A Tiempo Completo, A Tiempo Parcial)"
      }
      ]
      }
      }
    • Satyam
      The property names in the JSON message should all be enclosed in quotes. The latest version of the JSON utility is much stricter than the original used to be
      Message 2 of 2 , Feb 2, 2009
      • 0 Attachment
        The property names in the JSON message should all be enclosed in
        quotes. The latest version of the JSON utility is much stricter than
        the original used to be or the very primitive and not recommended parser
        that is built into DataSource.

        Satyam


        vishalhkd007 wrote:
        > I am trying to use AutoComplete with XHR datasource returning JSON
        > results.
        >
        > However, the autocomplete shows nothing even though the firebug plugin
        > shows the request being sent and response JSON object correctly received.
        >
        > Here is my HTML snippet ...
        >
        > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        > "http://www.w3.org/TR/html4/strict.dtd" >
        > <html>
        > <head>
        > <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        > <title>Basic Remote Data</title>
        >
        > <style type="text/css">
        > /*margin and padding on body element
        > can introduce errors in determining
        > element position and are not recommended;
        > we turn them off as a foundation for YUI
        > CSS treatments. */
        > body {
        > margin:0;
        > padding:0;
        > }
        > </style>
        >
        > <link rel="stylesheet" type="text/css"
        > href="/js/yui/build/fonts/fonts-min.css" />
        > <link rel="stylesheet" type="text/css"
        > href="/js/yui/build/autocomplete/assets/skins/sam/autocomplete.css" />
        >
        > <script type="text/javascript"
        > src="/js/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
        > <script type="text/javascript"
        > src="/js/yui/build/container/container_core.js"></script>
        >
        > <script type="text/javascript"
        > src="/js/yui/build/element/element-beta.js"></script>
        > <script type="text/javascript"
        > src="/js/yui/build/animation/animation.js"></script>
        > <script type="text/javascript"
        > src="/js/yui/build/connection/connection.js"></script>
        > <script type="text/javascript" src="/js/yui/build/json/json.js"></script>
        > <script type="text/javascript"
        > src="/js/yui/build/datasource/datasource-debug.js"></script>
        > <script type="text/javascript"
        > src="/js/yui/build/autocomplete/autocomplete-debug.js"></script>
        >
        > <!--begin custom header content for this example-->
        > <style type="text/css">
        > #myAutoComplete {
        > width:40em; /* set width here or else widget will expand to fit
        > its container */
        > padding-bottom:2em;
        > }
        > </style>
        >
        >
        > <!--end custom header content for this example-->
        >
        > </head>
        >
        > <body class=" yui-skin-sam">
        >
        >
        > <h1>Basic Remote Data</h1>
        >
        > <div class="exampleIntro">
        >
        > <p>This AutoComplete implementation points to an online script that
        > serves a data as delimited plain text. Enabling caching on the
        > DataSource can reduce trips to the server and speed performance for
        > repeated queries.</p>
        >
        > </div>
        >
        > <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
        >
        > <h3>Search our database:</h3>
        >
        > <div id="myAutoComplete">
        > <input id="myInput" type="text" />
        > <div id="myContainer"></div>
        > </div>
        >
        > <script type="text/javascript">
        > YAHOO.example.BasicRemote = function() {
        > // Use an XHRDataSource
        > var oDS = new YAHOO.util.XHRDataSource("/rest/globalSearch/suggest");
        > oDS.responseType = YAHOO.util.XHRDataSource.TYPE_JSON;
        > oDS.responseSchema = {
        > resultsList: "SuggestionsList.Suggestions",
        > fields:["value"]
        > };
        >
        > // Instantiate the AutoComplete
        > var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer",
        > oDS);
        >
        > oAC.generateRequest = function(sQuery) {
        > return
        > "?N=0&wildcard=true&maxResults=10&lookaheadSearchTerms=" +
        > sQuery;
        > };
        >
        > oAC.doBeforeExpandContainer = function(oTextbox, oContainer,
        > sQuery, aResults) {
        > var pos = YAHOO.util.Dom.getXY(oTextbox);
        > pos[1] += YAHOO.util.Dom.get(oTextbox).offsetHeight + 2;
        > YAHOO.util.Dom.setXY(oContainer,pos);
        > alert(aResults[0].value);
        > return true;
        > };
        >
        > return {
        > oDS: oDS,
        > oAC: oAC
        > };
        > }();
        > </script>
        > </body>
        > </html>
        >
        >
        > Also, hers is the output from the request to the server for the data
        >
        > ....loading....
        > Firebug's log limit has been reached. %S entries not shown. Preferences
        > GET
        > http://localhost:8080/rest/globalSearch/suggest?N=...wildcard=true&maxResults=10&lookaheadSearchTerms=A
        > http://localhost:8080/rest/globalSearch/suggest?N=0&wildcard=true&maxResults=10&lookaheadSearchTerms=A
        >
        > 200 OK
        > 36ms firebug-...server.js (line 103)
        > ParamsHeadersPostPutResponseCache
        > Response Headers
        > Request Headers
        >
        > {SuggestionsList:
        > {
        > TotalNumRecs:18,
        > Suggestions:[
        > {
        >
        > "dimVal":"4294910742",
        > "key":"dataset",
        > "value":"Accommodation and Food Services: Miscellaneous
        > Subjects: Establishments Using a Trade
        > Name Authorized by Franchisor: 1997"
        > }
        > , {
        >
        > "dimVal":"4294909395",
        > "key":"dataset",
        > "value":"Accommodation and Food Services: Subject Series - Misc
        > Subjects: Establishments Using
        > a Trade Name Authorized by Franchisor for the United States and
        > States: 2002"
        > }
        > , {
        >
        > "dimVal":"4294911546",
        > "key":"dataset",
        > "value":"Construction: Geographic Area Series: Detailed
        > Statistics for Establishments With Payroll
        > (Pt.A): 1997"
        > }
        > , {
        >
        > "dimVal":"4294911519",
        > "key":"dataset",
        > "value":"Construction: Geographic Area Summary: Detailed
        > Statistics for Establishments With Payroll
        > (Pt.A): 1997"
        > }
        > , {
        >
        > "dimVal":"4294911483",
        > "key":"dataset",
        > "value":"Construction: Industry Series: Detailed Statistics for
        > Establishments With Payroll (Pt
        > .A): 1997"
        > }
        > , {
        >
        > "dimVal":"4294911450",
        > "key":"dataset",
        > "value":"Construction: Industry Summary: Detailed Statistics
        > for Establishments With Payroll by
        > Industry Group (Pt.A): 1997"
        > }
        > , {
        >
        > "dimVal":"4294949922",
        > "key":"product_number",
        > "value":"GCT-PL-a"
        > }
        > , {
        >
        > "dimVal":"4294937004",
        > "key":"product_number",
        > "value":"PHC4-A-T1"
        > }
        > , {
        >
        > "dimVal":"4294937026",
        > "key":"product_number",
        > "value":"PHC4-A-T10"
        > }
        > , {
        >
        > "dimVal":"4294937022",
        > "key":"product_number",
        > "value":"PHC4-A-T11"
        > }
        > , {
        >
        > "dimVal":"4294937020",
        > "key":"product_number",
        > "value":"PHC4-A-T12"
        > }
        > , {
        >
        > "dimVal":"4294937018",
        > "key":"product_number",
        > "value":"PHC4-A-T13"
        > }
        > , {
        >
        > "dimVal":"4294937016",
        > "key":"product_number",
        > "value":"PHC4-A-T14"
        > }
        > , {
        >
        > "dimVal":"4294937014",
        > "key":"product_number",
        > "value":"PHC4-A-T15"
        > }
        > , {
        >
        > "dimVal":"4294937012",
        > "key":"product_number",
        > "value":"PHC4-A-T16"
        > }
        > , {
        >
        > "dimVal":"4294937010",
        > "key":"product_number",
        > "value":"PHC4-A-T17"
        > }
        > , {
        >
        > "dimVal":"4294953542",
        > "key":"subject",
        > "value":"A�o en el cual el Jefe de Hogar Se Mud� a la Unidad"
        > }
        > , {
        >
        > "dimVal":"4294951357",
        > "key":"subject",
        > "value":"Condici�n de Empleo (A Tiempo Completo, A Tiempo Parcial)"
        > }
        > ]
        > }
        > }
        >
        >
        >
        >
        > ------------------------------------
        >
        > Yahoo! Groups Links
        >
        >
        >
        > ------------------------------------------------------------------------
        >
        >
        > No virus found in this incoming message.
        > Checked by AVG - www.avg.com
        > Version: 8.0.233 / Virus Database: 270.10.16/1929 - Release Date: 01/31/09 20:03:00
        >
        >
      Your message has been successfully submitted and would be delivered to recipients shortly.