Twitter typeahead.js和多个匹配的json对象

Question

我正在编写一个应该能够根据一些课程参数找到大学课程的程序。我有一个包含1360个对象的巨大json对象，每个对象有大约20-30个参数。我只对其中的3-5个感兴趣。

我想要做的是能够根据它的编号，名称，教师姓名或每门课程中的一组关键字找到一门课程的描述。

反正。我已经尝试过使用twitters typeahead.js，据我所知，你需要解析一个字符串数组，并且它只需要1个数组。我有没有一种简单的方法（或其他javascript模块）可以做到这一点？

我目前的目标是：

var courses = [
    { "number": "<5 digits>", 
      "name": "<course name>", 
      "teacher": "<teacher name>", 
      "keywords": "<string of keywords>" }
    { ... }
    { ... }
    { ... }
    and so forth..
 ];

如上所述1360个大小的对象。

我希望获得类似于此的输出：

但是，我希望能够搜索上述参数（数字，姓名，教师姓名，关键字），并在文本字段输入的内容中获得最佳匹配。

有没有人知道如何实现这个目标？

Answer 1

这很简单，但不 typeahead.js。它有231个未解决的问题（在打字时，有些非常严重）并且未在年中更新。

请改用bootstrap3-typeahead。它维持和最新。在进一步阅读之前先看看文档。您没有提供JSON，因此我在下面的示例中使用了另一个JSON。

您所要做的就是定义一个matcher方法，这里非常简单，不区分大小写，与JSON项目中的所有属性进行比较：

matcher: function(item) {
  for (var attr in item) {
    if (~item[attr].toString().toLowerCase().indexOf(this.query.toLowerCase())) return true
  }
  return false
}

您可以使用displayText（纯示例）覆盖下拉列表中应显示的文件/文字：

displayText: function(item) {
  return item.id + ' ' + item.label  + ' ' + item.value
}

如果要完全覆盖项目的呈现，作为复杂的HTML，请使用displayText和highlighter的组合，其中每个显示字符串包含字符串化的JSON：

displayText: function(item) {
  return JSON.stringify(item) 
},
highlighter: function(item) {
  item = JSON.parse(item)
  return '<span><h4>'+item.value + '</h4>' + item.id  + ' ' + item.label +'</span>'
}

当显示字符串被字符串化时，必须使用应该是所选值的值属性更新<input>：

afterSelect: function(item) {
  this.$element[0].value = item.value
}

完整示例：

$('#example').typeahead( {
  source: json,
  matcher: function(item) {
    for (var attr in item) {
        if (~item[attr].toString().toLowerCase().indexOf(this.query.toLowerCase())) return true
    }
    return false
  },
  displayText: function(item) {
    return JSON.stringify(item)
  },
  highlighter: function(item) {
    item = JSON.parse(item)
    return '<span><h4>'+item.value + '</h4>' + item.id  + ' ' + item.label +'</span>'
  },
  afterSelect: function(item) {
    this.$element[0].value = item.value
  }
})                

演示 - ＆gt;的 http://jsfiddle.net/vhme3td1/