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

YUI AutoComplete using PHP

Expand Messages
  • kumar_mgowda
    Hi all, I am trying to implement YUI AutoComplete using PHP based on the example http://developer.yahoo.com/yui/examples/autocomplete/ac_ysearch_json.htm l
    Message 1 of 2 , Mar 31, 2008
    • 0 Attachment
      Hi all,

      I am trying to implement YUI AutoComplete using PHP based on the example http://developer.yahoo.com/yui/examples/autocomplete/ac_ysearch_json.html .  My datasource is JSON. However, I keep encountering the error "this.connMgr has no properties" and Firebug points to "oSelf._oConn = this.connMgr.asyncRequest("GET", sUri, oCallback, null);"

      Please let me know where I am going wrong.

      PHP Code
      <?php
      $output = array("ResultSet" => array(
                          "totalResultsAvailable" => "2200000",
                          "totalResultsReturned" => 5,
                          "Result" => array(
                                          array (
                                              "Title" => "foo",
                                              "Url" => "http:\/\/www.catb.org\/~esr\/jargon\/html\/F\/foo.html"
                                          ),
                                          array (
                                              "Title" => "Foo Fighters",
                                              "Url" => "http:\/\/www.foofighters.com"
                                      )
                              )   
                          )
                      );

      echo json_encode($output);
      ?>


      JavaScript

      <script type="text/javascript">
      var ACJson = new function(){
          // Instantiate an XHR DataSource and define schema as an array:
          this.oACDS = new YAHOO.widget.DS_XHR("fc_test.php", ["ResultSet.Result","Title"]);
          //this.oACDS.queryMatchContains = true;
          //this.oACDS.scriptQueryAppend = "output=json&results=100"; // Needed for YWS
         
          // Instantiate AutoComplete
          this.oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", this.oACDS);
          this.oAutoComp.useShadow = true;
          this.oAutoComp.formatResult = function(oResultItem, sQuery) {
              return oResultItem[1].Title + " (" + oResultItem[1].Url + ")";
          };
         
          this.oAutoComp.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);
              return true;
          };

          // Stub for form validation
          this.validateForm = function() {
              // Validation code goes here
              return true;
          };
      };
      </script>

    • kumar_mgowda
      I found the culprit! Order matters. Apparently, I was calling the autocomplete-min.js before json-min.js I changed the order of source script files and
      Message 2 of 2 , Mar 31, 2008
      • 0 Attachment
        I found the culprit! "Order matters." Apparently, I was calling the
        "autocomplete-min.js" before "json-min.js" I changed the order of
        source script files and now it works like a charm!



        --- In ydn-javascript@yahoogroups.com, "kumar_mgowda"
        <kumar_mgowda@...> wrote:
        >
        > Hi all,
        >
        > I am trying to implement YUI AutoComplete using PHP based on the example
        >
        http://developer.yahoo.com/yui/examples/autocomplete/ac_ysearch_json.htm\
        > l
        >
        <http://developer.yahoo.com/yui/examples/autocomplete/ac_ysearch_json.ht\
        > ml> . My datasource is JSON. However, I keep encountering the error
        > "this.connMgr has no properties" and Firebug points to "oSelf._oConn =
        > this.connMgr.asyncRequest("GET", sUri, oCallback, null);"
        >
        > Please let me know where I am going wrong.
        >
        > PHP Code
        > <?php
        > $output = array("ResultSet" => array(
        > "totalResultsAvailable" => "2200000",
        > "totalResultsReturned" => 5,
        > "Result" => array(
        > array (
        > "Title" => "foo",
        > "Url" =>
        > "http:\/\/www.catb.org\/~esr\/jargon\/html\/F\/foo.html"
        > ),
        > array (
        > "Title" => "Foo Fighters",
        > "Url" =>
        > "http:\/\/www.foofighters.com"
        > )
        > )
        > )
        > );
        >
        > echo json_encode($output);
        > ?>
        >
        > JavaScript
        >
        > <script type="text/javascript">
        > var ACJson = new function(){
        > // Instantiate an XHR DataSource and define schema as an array:
        > this.oACDS = new YAHOO.widget.DS_XHR("fc_test.php",
        > ["ResultSet.Result","Title"]);
        > //this.oACDS.queryMatchContains = true;
        > //this.oACDS.scriptQueryAppend = "output=json&results=100"; //
        > Needed for YWS
        >
        > // Instantiate AutoComplete
        > this.oAutoComp = new
        > YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer",
        > this.oACDS);
        > this.oAutoComp.useShadow = true;
        > this.oAutoComp.formatResult = function(oResultItem, sQuery) {
        > return oResultItem[1].Title + " (" + oResultItem[1].Url + ")";
        > };
        >
        > this.oAutoComp.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);
        > return true;
        > };
        >
        > // Stub for form validation
        > this.validateForm = function() {
        > // Validation code goes here
        > return true;
        > };
        > };
        > </script>
        >
      Your message has been successfully submitted and would be delivered to recipients shortly.