2

我正在尝试使用 Typeahead.js 过滤结果。我目前可以使用名为 activity_title 的字段过滤结果。这工作正常。

如何按第二个值过滤我的结果？在这种情况下，我只想选择具有特定活动级别值的结果。我需要在初始化预输入时设置它，而不是将其硬编码到 Bloodhound 初始化中（例如，我不想使用url: 'api/activity/&range=1,3'）

我有以下可以远程访问的有效 JSON：

{
"meta": [
    {
        "name": "activity_id",
        "table": "table",
        "max_length": 4
    },
    {
        "name": "activity_title",
        "table": "table",
        "max_length": 91
    },
    {
        "name": "activity_level",
        "table": "table",
        "max_length": 2
    }
],
"detail": [
    {
        "activity_id": "57",
        "activity_title": "Help old ladies to cross the road.",
        "activity_level": "2"
    },
    {
        "activity_id": "58",
        "activity_title": "Help mum with the washing up.",
        "activity_level": "3"
    },
    {
        "activity_id": "59",
        "activity_title": "Shine my shoes",
        "activity_level": "1"
    },
    {
        "activity_id": "60",
        "activity_title": "Put the bins out",
        "activity_level": "1"
    }
]
}

我像这样设置了一个 Bloodhound 实例：

var activities = new Bloodhound({
   datumTokenizer: function (datum) {
       return Bloodhound.tokenizers.whitespace(datum.activity_title);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
    url: '/api/activity/',
    filter: function(data) {
    return $.map(data['detail'], function(detail) {
        return {
            activity_id: detail.activity_id,
            activity_title: detail.activity_title,
            objective_level: detail.objective_level
        }; 
     });
   }
  }
});

我在键入时使用 Typeahead.js 来查找数据。

$( document ).on( "focus", ".typeahead-init", function() {

// + '&range=' + minimum + ',' + maximum
var minimum = $('#group-level-min-1').val();
var maximum = $('#group-level-max-1').val();

$(this).typeahead({
  highlight: true
},
{
  name: 'activity_title',
  displayKey: 'activity',
  source: activities.ttAdapter(),
  templates: {
    header: '<div class="header-name">Activities</div>',
    empty: [
      '<div class="empty-message">',
      'No activities match your search',
      '</div>'
    ].join('\n'),
    suggestion: Handlebars.compile('<div class="typeahead-activity" id="typeahead-activity-{{activity_id}}"><strong>{{objective_level}}</strong> - {{activity_title}}</div>')
  }
})
//info on binding selection at https://github.com/twitter/typeahead.js/issues/300
.bind('typeahead:selected', function(obj, datum, name) {      
    var target = $(this).closest('.activity-container');

        var activityId = datum['activity_id'];
        var url = '/api/activity/id/'+activityId;
        $(target).children('.activity-id').val(activityId);

        //http://runnable.com/UllA9u8MD5wiAACj/how-to-combine-json-with-handlebars-js-for-javascript-ajax-and-jquery
        var raw_template = $('#activity-output').html();
          // Compile that into an handlebars template
          var template = Handlebars.compile(raw_template);
          // Fetch all data from server in JSON
          $.get(url,function(data,status,xhr){
            $.each(data,function(index,element){
              // Generate the HTML for each post
              var html = template(element);
              // Render the posts into the page
              target.append(html);
            });
          });

});
$(this).removeClass("typeahead-init");
$(this).focus();
});

这是由 Stackoverflow 和其他人的几个答案拼凑而成的。非常感谢任何帮助。

4

0 回答 0