无法使YUI自动完成工作

时间:2009-05-26 08:25:30

标签: autocomplete yui

我花了最后几个小时阅读YUI文档和代码,但我无法使其正常工作。

我的远程数据源是XML。我有一个本地代理来检索远程数据。

我已通过Firebug确认,当我输入输入字段时,请求将被发送并返回数据。但是,我已配置为保存结果的div未被写入。在检查DOM时,YUI正在填充我的div,其html结构用于保存结果,但没有内容。

经常记录调用函数“formatResult”来过滤结果。但是,这永远不会发生。我通过在函数中使用alert()来测试它。

我无法弄清楚是不是发生了什么。下面是我的XML格式和我的代码。我正在通过YUI加载器加载数据源和自动完成依赖项。

<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</thumbURL>
  </RelatedResult>

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

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

    <rtype>Celebrity</rtype>
    <title>Amy Adams</title>
    <thumbURL>http://cm1.theinsider.com/media/0/56/87/wenn5095565.50.jpg</thumbURL>
  </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</thumbURL>
  </RelatedResult>
  <RelatedResult>
    <rid>9001</rid>
    <rtype>Celebrity</rtype>
    <title>Adam Goldberg</title>

    <thumbURL>http://cm1.theinsider.com/media/0/80/15/91969967.50.jpg</thumbURL>
  </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</thumbURL>

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

</list>

3 个答案:

答案 0 :(得分:0)

如果没有看到完整的实现,很难确定,但您可能会尝试关闭“applyLocalFilter”。换句话说,改变这一行:

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

改为:

autosearch.applyLocalFilter = false;

有关使用代码的工作实现,请参阅我的测试页:

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

答案 1 :(得分:0)

你当然应该重载'filterResponse',而不是'formatResult'。后者只是一个回调,它允许您控制结果的显示方式。

答案 2 :(得分:0)

而不是

YAHOO.example.auto = function() {...}

尝试

YAHOO.example.BasicRemote = function() {...}