使用jQuery和Bootstrap-Typeahead创建自定义Type-Head？

我正在尝试创建一个像这样的自定义类型头 –

。

我所做的是 –

HTML –

typehead_customization.css

  .bs-example{ font-family: sans-serif; position: relative; margin: 100px; } .typeahead, .tt-query, .tt-hint { border: 2px solid #CCCCCC; border-radius: 8px; font-size: 24px; height: 30px; line-height: 30px; outline: medium none; padding: 8px 12px; width: 396px; } .typeahead { background-color: #FFFFFF; } .typeahead:focus { border: 2px solid #0097CF; } .tt-query { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; } .tt-hint { color: #999999; } .tt-dropdown-menu { background-color: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 8px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); margin-top: 12px; padding: 8px 0; width: 422px; } .tt-suggestion { font-size: 24px; line-height: 24px; padding: 3px 20px; } .tt-suggestion.tt-is-under-cursor { background-color: #0097CF; color: #FFFFFF; } .tt-suggestion p { margin: 0; } 

typehead_customization.js –

  $(document).ready(function() { $('input.typeahead').typeahead({ name: 'accounts', local: ['Audi', 'BMW', 'Bugatti', 'Ferrari', 'Ford', 'Lamborghini', 'Mercedes Benz', 'Porsche', 'Rolls-Royce', 'Volkswagen'] }); }); 

所以，我得到一个类似的输出 –

因此，每个列表项的自动生成代码是 –

每一次。

我希望有类似的东西 –

但我希望有一个类似的输出 –

有人可以帮我吗？

在此先感谢您的帮助。

Answer 1

尝试

 var data = { "accounts":[ { "value":"Audi", "image":"http://lorempixel.com/100/100/transport/", "description":"Audi car", "label":"an Audi" }, { "value":"BMW", "image":"http://lorempixel.com/100/100/transport/", "description":"BMW car", "label":"a BMW" }, { "value":"Bugatti", "image":"http://lorempixel.com/100/100/transport/", "description":"Bugatti car", "label":"a Bugatti" }, { "value":"Ferrari", "image":"http://lorempixel.com/100/100/transport/", "description":"Ferrari car", "label":"a Ferrari" } ,{ "value":"Ford", "image":"http://lorempixel.com/100/100/transport/", "description":"Ford car", "label":"a Ford" }, { "value":"Lamborghini", "image":"http://lorempixel.com/100/100/transport/", "description":"Lamborghini car", "label":"a Lamborghini" }, { "value":"Mercedes Benz", "image":"http://lorempixel.com/100/100/transport/", "description":"Mercedes Benz", "label":"a Mercedes Benz" } ,{ "value":"Porsche", "image":"http://lorempixel.com/100/100/transport/", "description":"Porsche car", "label":"a Porsche" } ,{ "value":"Rolls-Royce", "image":"http://lorempixel.com/100/100/transport/", "description":"Rolls-Royce car", "label":"a Rolls-Royce" } ,{ "value":"Volkswagen", "image":"http://lorempixel.com/100/100/transport/", "description":"Volkswagen car", "label":"a Volkswagen" } ] }; var suggestions = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), queryTokenizer: Bloodhound.tokenizers.whitespace, local: $.map(data.accounts, function(d) { return {value:d.value, suggest:d} }) }); suggestions.initialize(); $(".bs-example .typeahead").typeahead({ minLength: 1, hint: true, highlight: true }, { name: "suggestions", displayKey: "value", templates: { suggestion: function(data) { console.log(data); var details = "
" + data.value + "
" + "" + "
" + "
" + data.suggest.description + "
" + data.suggest.label + "
"; return details } }, source: suggestions.ttAdapter() }); 

请参见Typeahead – 示例 – 自定义模板

Typeahead.js – 无法选择建议

 var data = { "accounts": [{ "value": "Audi", "image": "http://lorempixel.com/100/100/transport/", "description": "Audi car", "label": "an Audi" }, { "value": "BMW", "image": "http://lorempixel.com/100/100/transport/", "description": "BMW car", "label": "a BMW" }, { "value": "Bugatti", "image": "http://lorempixel.com/100/100/transport/", "description": "Bugatti car", "label": "a Bugatti" }, { "value": "Ferrari", "image": "http://lorempixel.com/100/100/transport/", "description": "Ferrari car", "label": "a Ferrari" }, { "value": "Ford", "image": "http://lorempixel.com/100/100/transport/", "description": "Ford car", "label": "a Ford" }, { "value": "Lamborghini", "image": "http://lorempixel.com/100/100/transport/", "description": "Lamborghini car", "label": "a Lamborghini" }, { "value": "Mercedes Benz", "image": "http://lorempixel.com/100/100/transport/", "description": "Mercedes Benz", "label": "a Mercedes Benz" }, { "value": "Porsche", "image": "http://lorempixel.com/100/100/transport/", "description": "Porsche car", "label": "a Porsche" }, { "value": "Rolls-Royce", "image": "http://lorempixel.com/100/100/transport/", "description": "Rolls-Royce car", "label": "a Rolls-Royce" }, { "value": "Volkswagen", "image": "http://lorempixel.com/100/100/transport/", "description": "Volkswagen car", "label": "a Volkswagen" }] }; var suggestions = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), queryTokenizer: Bloodhound.tokenizers.whitespace, local: $.map(data.accounts, function(d) { return { value: d.value, suggest: d } }) }); suggestions.initialize(); $(".bs-example .typeahead").typeahead({ minLength: 1, hint: true, highlight: true }, { name: "suggestions", displayKey: "value", templates: { suggestion: function(data) { console.log(data); var details = "
" + data.value + "
" + "" + "
" + "
" + data.suggest.description + "
" + data.suggest.label + "
"; return details } }, source: suggestions.ttAdapter() }); 

 .bs-example { font-family: sans-serif; position: relative; margin: 100px; } .typeahead, .tt-query, .tt-hint { border: 2px solid #CCCCCC; border-radius: 8px; font-size: 24px; height: 30px; line-height: 30px; outline: medium none; padding: 8px 12px; width: 396px; } .typeahead { background-color: #FFFFFF; } .typeahead:focus { border: 2px solid #0097CF; } .tt-query { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; } .tt-hint { color: #999999; } .tt-dropdown-menu { background-color: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 8px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); margin-top: 12px; padding: 8px 0; width: 422px; } .tt-suggestion { font-size: 24px; line-height: 24px; padding: 3px 20px; } .tt-suggestion.tt-is-under-cursor { background-color: #0097CF; color: #FFFFFF; } .tt-suggestion p { margin: 0; } .resultDesc, .resultLabel { font-size: 14px; font-style: italic; }