首页 新闻 赞助 找找看

Yahoo YUI3 autocomplete相关问题

0
悬赏园豆:10 [已关闭问题] 关闭于 2014-04-09 09:42

今天要用 Yahoo YUI3 实现查询框的 autocomplete,通过远程方法获取 jsonp 数据,各种查手册google百度,结果连 yui library 里的远程访问例子都没太懂。

现把问题贴在下面

1. 关于例子 Remote Data via JSONP

<div id="demo" class="yui3-skin-sam"> <!-- You need this skin class -->
  <label for="ac-input">Enter a YUI module name:</label><br>
  <input id="ac-input" type="text" size="45">
</div>

<script>
YUI().use('array-extras', 'autocomplete', 'autocomplete-highlighters', function (Y) {
  function locateModules(response) {
    var results = (response && response.data && response.data.results) || [];

    return Y.Array.filter(results, function (result) {
      return result._type === 'module';
    });
  }

  Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
    resultHighlighter: 'phraseMatch',
    resultListLocator: locateModules,
    resultTextLocator: 'name',
    source: 'http://yuilibrary.com/api/v1/search/suggest?q={query}&callback={callback}&count=50'
  });
});
</script>

这里 source 后 url 里用 {query} 和 {callback}什么时候被输入框中的动态变化的字符串代替呢?为什么我访问的 source: 'http://autoc.finance.yahoo.com/autoc?query={query}&callback=YAHOO.Finance.SymbolSuggest.ssCallback' 就不可以

 

2. 有提示说要用 source: function(query, callback),于是我用如下代码

<script type="text/javascript">
$(document).ready(function(){
  YUI().use('autocomplete', function (Y) {
    function locateModules(response) {
    var results = (response && response.ResultSet && response.ResultSet.Result) || [];
    return results;
    }

    Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
      activateFirstItem: true,
      resultListLocator: locateModules,
      resultTextLocator: 'name',
      source: function (query, callback) {
        // Use JQuery to call JSONP API
        var url = 'http://autoc.finance.yahoo.com/autoc?query='+document.getElementById("ac-input").value+'&callback=YAHOO.Finance.SymbolSuggest.ssCallback';
        $.get(url,function(data, status){
          document.getElementById("topSec").innerHTML=url; // this is for test
        });
        // Implement call back function for Yahoo symbol JSONP API
        YAHOO.Finance.SymbolSuggest.ssCallback = function (data) {
            callback(data.ResultSet.Result);
        }
      }
    });
  });
});
</script>

<body>


<div id="queryForm" class="yui3-skin-sam">
    <form>
        <font color="#ffffff" size="4px">Company:</font> 
        <input id="ac-input" type="text" size="80px" style="color:#cccccc;" value="Enter company symbol" 
               onfocus="this.value=''; this.style='color:#000000';" 
               onblur="if(this.value.length < 1) {this.value='Enter company symbol';style='color:#cccccc';}"/>
        <input type="button" value="Search" onclick="">
    </form>
</div>

</body>
</html>

其中 use jquery to call jsonp API 和 implement call back function for Yahoo symbol JSONP API 是任务要求中给的提示

做了一天还是不明白,特别是 YUI 的文档都不太懂,希望各位熟悉的高手答疑解惑。

Joyce-Lee的主页 Joyce-Lee | 初学一级 | 园豆:179
提问于:2014-03-26 10:00
< >
分享
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册