本文介绍了使用jQuery和Bootstrap-Typeahead创建自定义Type-Head？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想要创建一个自定义类型的头像这样 -
。
我所做的是 -
HTML -
<！DOCTYPE html>
< html lang =en>
< head>
< meta charset =UTF-8>
< title> Twitter Typeahead示例< / title>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script>
< script type =text / javascriptsrc =js / bootstrap-typeahead.js>< / script>
< script type =text / javascriptsrc =js / typehead_customization.js>< / script>
< link href =css / typehead_customization.css =stylesheet>
< / head>
< body>
< div class =bs-example>
< input name =typehead_inputtype =textclass =typeahead tt-queryautocomplete =offspellcheck =false>
< / div>
< / body>
< / html>
typehead_customization.css
$ b b.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'）。
name：'accounts'，
local：['Audi'，'BMW'，'Bugatti'，'Ferrari'，'Ford'，'Lamborghini'，'Mercedes Benz'，'Porsche' 'ros-royce'，'Volkswagen']
}）;
}）;
所以，我得到了一个输出 -
因此，每个列表项的生成代码为 -
< li>< a href =＃>< / a> ;< / li>
每次。
有一些像 -
但我想有一个类似的输出 -
< div class =resultContainer>
< div class =resultImage>< img />< / div>
< div class =resultDesc>< / div>
< div class =resultLabel>< / div>
< / div>
任何人都可以帮助我吗？
解决方案尝试
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：宝马汽车，
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： ：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：罗尔斯·罗伊斯汽车，
label：罗尔斯·罗伊斯
}
，{
value：Volkswagen ，
image：http://lorempixel.com/100/100/transport/，
description：Volkswagen car，
label：a Volkswagen
}
]
};
VAR建议=新的寻血猎犬（{
datumTokenizer：Bloodhound.tokenizers.obj.whitespace（'值'），
queryTokenizer：Bloodhound.tokenizers.whitespace，
local：$ .map（data.accounts，function（d）{
return {value：d.value，suggested：d}
}）
}
suggestions.initialize（）;
$（。bs-example .typeahead）。typeahead（{
minLength：1，
hint：true，
highlight：true
}，{
name：suggestions，
displayKey：value，
templates：{
suggestion：function（data）{
console.log ）;
VAR细节=< DIV CLASS = resultContainer>中
+ data.value
+< DIV CLASS = resultImage>中
+< IMG SRC =+ data.suggest.image +/>
+< / div>+< div class = resultDesc>
+ data.suggest.description
+< / DIV>< DIV CLASS = resultLabel>中
+ data.suggest.label +< / DIV>< / DIV>中，
返回详情
}
}，
source：suggestions.ttAdapter（）
}）;
查看
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/ ：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/ 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：梅赛德斯奔驰，image：http://lorempixel.com/100/100/transport/，description：梅赛德斯奔驰，label：a梅赛德斯奔驰}，{value：保时捷，image：http://lorempixel.com/100/100/transport/，description：保时捷车，label：a Porsche}，{value：Rolls-Royce，image：http://lorempixel.com/100/100/transport/，description： rooyce car，label：a Rolls-Royce}，{value：Volkswagen，image：http://lorempixel.com/100/100/transport/ ：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 var details =< div class = resultContainer> + data.value +< div class = resultImage> +< img src =+ data.suggest.image +/> +< / div> +< div class = resultDesc> + data.suggest.description +< / div>< div class = resultLabel> + data.suggest.label +< / div>< / div>; return details}}，source：suggestions.ttAdapter（）}）;.bs-example {font-family：sans-serif;位置：相对; margin：100px;}。typeahead，.tt-query，.tt-hint {border：2px solid #CCCCCC; border-radius：8px; font-size：24px; height：30px; line-height：30px;大纲：中无; 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;}< script src = http://code.jquery.com/jquery-1.11.2.min.js\"> ;</script> ;<script src =http://twitter.github.io/typeahead.js/releases/ latest / typeahead.bundle.js>< / script>< div class =bs-example> < input type =textclass =typeahead tt-queryplaceholder =accounts/>< / div>
>
I am trying to create a custom type-head like this-
.
What I have done is -
HTML-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example of Twitter Typeahead</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap-typeahead.js"></script> <script type="text/javascript" src="js/typehead_customization.js"></script> <link href="css/typehead_customization.css" rel="stylesheet"> </head> <body> <div class="bs-example"> <input name="typehead_input" type="text" class="typeahead tt-query" autocomplete="off" spellcheck="false"> </div> </body> </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'] }); });So, I get a output like it-
So, the auto-generated code for per list item is -
<li><a href="#"></a></li>for each time.
I want to have something like-
But I want to have a output like it like-
<div class="resultContainer"> <div class="resultImage"><img /></div> <div class="resultDesc"></div> <div class="resultLabel"></div> </div>Can anyone help me please?
Thanks in advance for helping.
解决方案Try
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 = "<div class=resultContainer>" + data.value + "<div class=resultImage>" + "<img src=" + data.suggest.image + " />" + "</div>" + "<div class=resultDesc>" + data.suggest.description + "</div><div class=resultLabel>" + data.suggest.label + "</div></div>"; return details } }, source: suggestions.ttAdapter() });See Typeahead - examples - Custom Templates
Typeahead.js - Unable to choose suggestion
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 = "<div class=resultContainer>" + data.value + "<div class=resultImage>" + "<img src=" + data.suggest.image + " />" + "</div>" + "<div class=resultDesc>" + data.suggest.description + "</div><div class=resultLabel>" + data.suggest.label + "</div></div>"; 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; }<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script> <div class="bs-example"> <input type="text" class="typeahead tt-query" placeholder="accounts" /> </div>这篇关于使用jQuery和Bootstrap-Typeahead创建自定义Type-Head？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
10-22 22:48