使用jQuery和Bootstrap-Typeahead创建自定义Type-Head？
我正在尝试创建一个像这样的自定义类型头 –
。
我所做的是 –
HTML –
Example of Twitter Typeahead 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'] }); });
所以，我得到一个类似的输出 –
因此，每个列表项的自动生成代码是 –
每一次。
我希望有类似的东西 –
但我希望有一个类似的输出 –
![]()
有人可以帮我吗？
在此先感谢您的帮助。
尝试
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; }