如何重构JS预输入实例

Question

我有下面的代码块实例化预输入

$("#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的数组。

我怎么会有一块代码循环数组，并创建相同的结果如上。所有建议表示赞赏

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