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

Autocomplete with XML datasource retrieved from server

Expand Messages
  • gulliver_cit
    Hi, I am trying to build an autocomplete field with a datasource instance of data retrieved from a server. I have written the code and tested it, and the
    Message 1 of 1 , Mar 4, 2009
    View Source
    • 0 Attachment
      Hi,

      I'am trying to build an autocomplete field with a datasource instance of data retrieved from a server. I have written the code and tested it, and the result so far is that the query to the server is done correctly. I have checked with handleResponse method that the data is also returned correctly.

      Nevertheless It doesn't get to the 'formatResult' method of the AutoComplete instance. Looks like the communication between the datasource and the autocomplete element is not working when the data is coming from the server.

      I am usign firebug to debug but I do not receive any error message and I do not know what is going wrong.

      I copy below the code and a sample of the returned data from the server.

      Any help will be much appreciated.

      ..............
      YAHOO.com.oasisLinks.node.suggData = function(){

      //Data Source Data
      var oDS = new YAHOO.util.XHRDataSource("/oasisLinks/loadTypeList.do");

      // Set the responseType
      oDS.responseType = YAHOO.util.XHRDataSource.TYPE_XML;

      // DataSource Schema
      oDS.responseSchema = {
      resultNode: "restype",
      fields: ["res_id", "res_desc", "icon_name","ic_path","parent_id"],
      metaNode : "ResultSet" // Name of the node holding meta data
      };

      oDS.maxCacheEntries = 100;

      //Autocomplete Data
      var oAC = new YAHOO.widget.AutoComplete("txtTypeOther","typeContainer", oDS);
      oAC.animVert = true;
      oAC.alwaysShowContainer = true;
      oAC.applyLocalFilter = true;

      // Container will expand and collapse horizontally
      oAC.animHoriz = true;

      // Container animation will take 1 seconds to complete
      oAC.animSpeed = 1;

      //Maximun number to display
      oAC.maxResultsDisplayed = 20;

      //Generate request to server
      oAC.generateRequest = function(sQuery) {
      return "?action=TypeQ&query=" + sQuery;
      };


      var getImgUrl = function(oResultItem, sSize) {
      var sId = oResultItem.res_id;
      var sdesc = oResultItem.res_desc;
      var spath = oResultItem.ic_path;
      return "<img src='" + spath + "' class='flickrImg'>";
      }


      // Customize formatter to show thumbnail images
      oAC.formatResult = function(oResultItem, sQuery) {
      // This was defined by the schema array of the data source
      var sTitle = oResultItem.res_id;
      var sMarkup = getImgUrl(oResultItem) + " " + sTitle;
      return (sMarkup);
      };

      return {
      oDS: oDS,
      oAC: oAC
      }
      };
      ....................
      <ResultSet>
      <restype>
      <res_id>GData1</res_id>
      <res_desc>GDesc1</res_desc>
      <icon_name>icon_document</icon_name>
      <ic_path>/Images/Iconos/icon_gdata.png</ic_path>
      <parent_id>GData_parent1</parent_id>
      </restype>
      <restype>
      <res_id>GData2</res_id>
      <res_desc>GDesc2</res_desc>
      <icon_name>icon_document</icon_name>
      <ic_path>/Images/Iconos/icon_gdata.png</ic_path>
      <parent_id>GData_parent1</parent_id>
      </restype>
      </ResultSet>
    Your message has been successfully submitted and would be delivered to recipients shortly.