Can't get YUI Autocomplete to work

Question

I've spent the last several hours reading through YUI docs and code and I'm not able to get this working.

My remote data source is XML. I have a local proxy acting to retrieve the remote data.

I've confirmed via Firebug that as I am typing in the input field, the requests are being sent off and the data is being returned. However, the div I have configured to hold the results is not being written to. When examining the DOM, YUI is filling my div with its html structure used to hold the results, but no contents.

It is frequently documented that a function "formatResult" is called to filter results. However, this never fires. I tested this by using an alert() in the function.

I'm at a loss to figure out what the heck isn't happening. Below is my XML format and my code. I am loading the datasource and autocomplete dependencies via YUI loader.

<div id="auto-search">
 <input type="text" id="auto-search-input" value=""/>
 <div id="auto-search-results"></div>
</div>


YAHOO.example.auto = function() {

 var searchDataSource = new YAHOO.util.XHRDataSource("http://localhost/insidersearchproxy.php"); 
 searchDataSource.responseType = YAHOO.util.XHRDataSource.TYPE_XML; 
 searchDataSource.responseSchema = { 
  resultNode : "RelatedResult", 
  fields: [ "rid","rtype", "title", "thumbURL" ]
 }

 var autosearch = new YAHOO.widget.AutoComplete("auto-search-input","auto-search-results", searchDataSource); 
 autosearch.generateRequest = function(sQuery) { 
  return "?q="+sQuery;
 }; 

 autosearch.resultsTypeList = false; // pass data as an object 

 autosearch.applyLocalFilter = true; // pass results thru filter
 autosearch.formatResult = function(oResultData, sQuery, sResultMatch) { 
  var sMarkup = (sResultMatch) ? sResultMatch : ""; 
  return sMarkup; 
 };

    return {
        searchDataSource: searchDataSource,
        autosearch: autosearch
    };
}();

<list>
  <RelatedResult>
    <rid>2014</rid>
    <rtype>Celebrity</rtype>
    <title>Adam Brody</title>
    <thumbURL>http://cm1.theinsider.com/media/0/52/65/wenn1302741.50.jpg&lt;/thumbURL&gt;
  </RelatedResult>

  <RelatedResult>
    <rid>2776</rid>
    <rtype>Celebrity</rtype>
    <title>Adam Sandler</title>
    <thumbURL>http://cm1.theinsider.com/media/0/49/95/wenn1198212.50.jpg&lt;/thumbURL&gt;
  </RelatedResult>
  <RelatedResult>

    <rid>3084</rid>
    <rtype>Celebrity</rtype>
    <title>Bryan Adams</title>
    <thumbURL>http://cm1.theinsider.com/media/0/1/46/RoomSer4.50.jpg&lt;/thumbURL&gt;
  </RelatedResult>
  <RelatedResult>
    <rid>5747</rid>

    <rtype>Celebrity</rtype>
    <title>Amy Adams</title>
    <thumbURL>http://cm1.theinsider.com/media/0/56/87/wenn5095565.50.jpg&lt;/thumbURL&gt;
  </RelatedResult>
  <RelatedResult>
    <rid>6572</rid>
    <rtype>Celebrity</rtype>

    <title>Adam Richard</title>
    <thumbURL>http://cm1.theinsider.com/media/0/7/97/Adam_Richard_small.50.jpg&lt;/thumbURL&gt;
  </RelatedResult>
  <RelatedResult>
    <rid>9001</rid>
    <rtype>Celebrity</rtype>
    <title>Adam Goldberg</title>

    <thumbURL>http://cm1.theinsider.com/media/0/80/15/91969967.50.jpg&lt;/thumbURL&gt;
  </RelatedResult>
  <RelatedResult>
    <rid>30897</rid>
    <rtype>Celebrity</rtype>
    <title>Adam Rothenberg</title>
    <thumbURL>http://cm1.theinsider.com/media/0/99/86/ex_bio_adam.50.jpg&lt;/thumbURL&gt;

  </RelatedResult>
  <RelatedResult>
    <rid>58009</rid>
    <rtype>Celebrity</rtype>
    <title>Adam Lambert</title>
    <thumbURL>http://cm1.theinsider.com/media/0/361/95/271363.50.jpg&lt;/thumbURL&gt;
  </RelatedResult>

</list>

Answer 1

It's hard to know for sure without seeing your full implementation, but you might try turning off "applyLocalFilter". In other words, change this line:

autosearch.applyLocalFilter = true; // pass results thru filter

to this instead:

autosearch.applyLocalFilter = false;

For a working implementation using your code, see my test page:

http://chris.photobooks.com/tests/autocomplete/test20090620.html

Answer 2

You should of course overload 'filterResponse', not 'formatResult'. The latter is just a callback which allows you to control how your results are shown.