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

Question

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

我想要做的是能够根据课程的编号、名称、老师的名字或每门课程描述的一组关键词找到一门课程。

不管怎么说。我尝试过使用twitters typeahead.js，据我所知，您需要解析它一个字符串数组，而且它只需要一个数组。难道没有一个简单的方法(或者另一个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 (纯示例)覆盖应该在下拉列表中显示的attrs / text：

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
  }
})                

演示-> http://jsfiddle.net/vhme3td1/