Twiiter Typeahead自定义模板

Twiiter Typeahead自定义模板 - 获取默认示例工作(Twiiter Typeahead Custom Templates - Getting Default Example Working)

我无法获得在此处找到的默认Twitter typeahead自定义模板工作： http : //twitter.github.io/typeahead.js/examples/#custom-templates我能够使默认演示工作得很好。这是我的js代码

jQuery(document).ready(function() { var bestPictures = [ {"year": "1996", "value": "Tom", "url": "http://example.com"}, {"year": "1998", "value": "Tim", "url": "http://example.com"} ]; $('#custom-templates .typeahead').typeahead(null, { name: 'best-pictures', display: 'value', source: bestPictures, templates: { empty: [ '<div class="empty-message">', 'unable to find any Best Picture winners that match the current query', '</div>' ].join('\n'), suggestion: Handlebars.compile('<div><strong>{{value}}</strong> – {{year}}</div>') } }); });

我无法找到他们从哪里获得bestPictures的例子的源代码。我也安装了车把。当我在搜索框中输入字母t ，我的控制台日志显示this.source is not a function中该行的this.source is not a function ： this.source(query, sync, async);

此外，我想在选择下拉选项后进行重定向，类似于

on('typeahead:selected', function(event, datum) { window.location = datum.url });

I am having trouble getting the default Twitter typeahead custom template working found here: http://twitter.github.io/typeahead.js/examples/#custom-templates I am able to get the default demo working just fine. Here is my js code

I couldn't find the source code of the example in where they get bestPictures from. I also have handlebars installed. When I type in the letter t into the search box, my console log shows this.source is not a function in typeahead.bundle.js on this line: this.source(query, sync, async);

Additionally, I would like to do a redirect once a dropdown option is selected, similar to

on('typeahead:selected', function(event, datum) { window.location = datum.url });

最满意答案

尝试使用Bloodhound ，将对象bestPictures作为可在.typeahead suggestions函数中访问的属性返回

jQuery(document).ready(function() {

  var bestPictures = [{
    "year": "1996",
    "value": "Tom",
    "url": "http://example.com"
  }, {
    "year": "1998",
    "value": "Tim",
    "url": "http://example.com"
  }];

  var pictures = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: $.map(bestPictures, function(d) {
      return {
        value: d.value,
        // pass `bestPictures` to `suggestion`
        suggest: d
      }
    })
  });

  pictures.initialize();

  $("#custom-templates .typeahead").typeahead(null, {
    name: "best-pictures",
    display: "value",
    source: pictures.ttAdapter(),
    templates: {
      notFound: [
        "<div class=empty-message>",
        "unable to find any Best Picture winners that match the current query",
        "</div>"
      ].join("\n"),
      suggestion: function(data) {
        // `data` : `suggest` property of object passed at `Bloodhound`
        return "<div><strong>" + data.suggest.value + "</strong>" 
               + data.suggest.year + "</div>"
      }
    }
  });
}); 
  <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js">
</script>

<div id="custom-templates">
  <input type="text" class="typeahead" placeholder="Best picture winners" />
</div> 
  
 
Try using Bloodhound , returning object bestPictures as a property accessible at .typeahead suggestions function 
 
 
  
  jQuery(document).ready(function() {

  var bestPictures = [{
    "year": "1996",
    "value": "Tom",
    "url": "http://example.com"
  }, {
    "year": "1998",
    "value": "Tim",
    "url": "http://example.com"
  }];

  var pictures = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: $.map(bestPictures, function(d) {
      return {
        value: d.value,
        // pass `bestPictures` to `suggestion`
        suggest: d
      }
    })
  });

  pictures.initialize();

  $("#custom-templates .typeahead").typeahead(null, {
    name: "best-pictures",
    display: "value",
    source: pictures.ttAdapter(),
    templates: {
      notFound: [
        "<div class=empty-message>",
        "unable to find any Best Picture winners that match the current query",
        "</div>"
      ].join("\n"),
      suggestion: function(data) {
        // `data` : `suggest` property of object passed at `Bloodhound`
        return "<div><strong>" + data.suggest.value + "</strong>" 
               + data.suggest.year + "</div>"
      }
    }
  });
}); 
  <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js">
</script>

<div id="custom-templates">
  <input type="text" class="typeahead" placeholder="Best picture winners" />
</div>

更多推荐