如何重构 js typeahead 实例化答案

【问题标题】：How to refactor js typeahead instantiation如何重构 js typeahead 实例化
【发布时间】：2017-02-25 14:55:30
【问题描述】：

我有以下代码块实例化预先输入

$("#searchbox").typeahead({
    minLength: 3,
  }, {
    name: "Type0",
    displayKey: "name",
    source: bloodHound[0].ttAdapter(),
    templates: {
      header: "<h4 class='typeahead-header'><img src='Type0.png'>Type0</h4>",
      suggestion: Handlebars.compile(["{{name}}<br><small>{{address}}        </small>"].join(""))
    }
  }, {
    name: "Type1",
    displayKey: "name",
    source: bloodHound[1].ttAdapter(),
    templates: {
      header: "<h4 class='typeahead-header'><img src='Type1.png'>Type1</h4>",
      suggestion: Handlebars.compile(["{{name}}<br><small>{{address}}</small>"].join(""))
    }
  }
)

如果我想添加另一个类型，例如Type2 我必须复制并粘贴该块，因此效率不高。我在一个名为 types 的数组中有可用的类型。

我将如何拥有一个循环数组并创建与上述结果相同的代码块。所有建议表示赞赏。

【问题讨论】：

标签： javascript jquery twitter-bootstrap refactoring typeahead.js

【解决方案1】：

我不知道您的 types 数组应该是什么样子，但这是我的设置方式：

var types = [
  {
    name: 'Type0',
    displayKey: 'Type 0'
  },
  {
    name: 'Type1',
    displayKey: 'Type 1'
  }
]


var args = types.map(function (type, i) {
  return {
    name: type.name,
    displayKey: type.displayKey,
    source: bloodHound[i].ttAdapter(),
    templates: {
      header: '<h4 class="typeahead-header"><img src="' + type.name + '.png">' + type.name + '</h4>',
      suggestion: Handlebars.compile(["{{name}}<br><small>{{address}}        </small>"].join(""))
    }
  }
})

args.unshift({ minLength: 3 })

// Calls typeahead with a variable number of arguments on the search box
$.fn.typeahead.apply($("#searchbox"), args)

【讨论】：