gpt4 book ai didi

javascript - Bootstrap tokenfield 和 Twitter typeahead 下拉菜单没有样式

转载 作者:行者123 更新时间:2023-11-30 15:18:18 26 4
gpt4 key购买 nike

我有一个类似于 this one 的问题但我同时使用 Tokenfield v0.12.1Twitter typeahead v0.11.1 .当我开始输入并出现建议时,它们没有样式。它显示为纯文本(如果我点击建议,它会添加到输入字段)。例如,如果我键入“re”,则会出现“red”的建议,但它显示为无样式,如下所示:

{"_query":"re","value":"red","label":"red"}

我的 CSS 源文件

<link href="~/Content/bootstrap-tokenfield/tokenfield-typeahead.css" rel="stylesheet" />
<link href="~/Content/bootstrap-tokenfield/bootstrap-tokenfield.css" rel="stylesheet" />

我的 JS 源文件

<script src="~/Scripts/bootstrap-tokenfield.min.js"></script>
<script src="~/Scripts/typeahead.bundle.min.js"></script>
<script>
$(document).ready(function () {
var engine = new Bloodhound({
local: [{ value: 'red' }, { value: 'blue' }, { value: 'green' }, { value: 'yellow' }, { value: 'violet' }, { value: 'brown' }, { value: 'purple' }, { value: 'black' }, { value: 'white' }],
datumTokenizer: function (d) {
return Bloodhound.tokenizers.whitespace(d.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace
});

engine.initialize();

$('#tokenfield-typeahead').tokenfield({
typeahead: [null, {
source: engine.ttAdapter()
}]
});
});
</script>

我的 HTML

<input type="text" class="typeahead form-control" id="tokenfield-typeahead" />

我的代码片段如下所示。请帮助我做错了什么?

$(document).ready(function() {
var engine = new Bloodhound({
local: [{
value: 'red'
}, {
value: 'blue'
}, {
value: 'green'
}, {
value: 'yellow'
}, {
value: 'violet'
}, {
value: 'brown'
}, {
value: 'purple'
}, {
value: 'black'
}, {
value: 'white'
}],
datumTokenizer: function(d) {
return Bloodhound.tokenizers.whitespace(d.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace
});

engine.initialize();

$('#tokenfield-typeahead').tokenfield({
typeahead: [null, {
source: engine.ttAdapter()
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/tokenfield-typeahead.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>

<div class="row">
<div class="col-lg-12">
<dl class="dl-horizontal">
<dt>Action Items:</dt>
<dd>
<div id="action-items">
<input type="checkbox" name="item1" value="item1"> Action Item 1<br>
<form class="form-inline">
<div class="tokenfield form-group">
<input type="text" class="typeahead form-control" id="tokenfield-typeahead" />
</div>
<button type="button" class="btn btn-default">Save</button>
</form>
<input type="checkbox" name="item2" value="item2"> Action Item 2<br>
<input type="checkbox" name="item3" value="item3"> Action Item 3
</div>
</dd>
<hr />
</dl>
</div>
</div>

最佳答案

For example, if I type "re", the suggestion for "red" appears but it shows unstyled as follows:

{"_query":"re","value":"red"...

为了避免您需要将 displayKey 选项添加到您的 tokenfield:

$('#tokenfield-typeahead').tokenfield({
typeahead: [null, {
source: engine.ttAdapter(),
displayKey: 'value'
}]
});

$(document).ready(function() {
var engine = new Bloodhound({
local: [{
value: 'red'
}, {
value: 'blue'
}, {
value: 'green'
}, {
value: 'yellow'
}, {
value: 'violet'
}, {
value: 'brown'
}, {
value: 'purple'
}, {
value: 'black'
}, {
value: 'white'
}],
datumTokenizer: function(d) {
return Bloodhound.tokenizers.whitespace(d.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace
});

engine.initialize();

$('#tokenfield-typeahead').tokenfield({
typeahead: [null, {
source: engine.ttAdapter(),
displayKey: 'value'
}]
});
});
.tt-query, 
.tt-hint {
width: 396px;
height: 30px;
padding: 8px 12px;
font-size: 24px;
line-height: 30px;
border: 2px solid #ccc;
border-radius: 8px;
outline: none;
}

.tt-query {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
display: none;
}

.tt-menu {
width: 422px;
margin-top: 12px;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
padding: 3px 20px;
font-size: 18px;
line-height: 24px;
}

.tt-suggestion.tt-is-under-cursor {
color: #fff;
background-color: #0097cf;

}

.tt-suggestion p {
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/tokenfield-typeahead.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>



<div class="row">
<div class="col-lg-12">
<dl class="dl-horizontal">
<dt>Action Items:</dt>
<dd>
<div id="action-items">
<input type="checkbox" name="item1" value="item1"> Action Item 1<br>
<form class="form-inline">
<div class="tokenfield form-group">
<input type="text" class="typeahead form-control" id="tokenfield-typeahead" />
</div>
<button type="button" class="btn btn-default">Save</button>
</form>
<input type="checkbox" name="item2" value="item2"> Action Item 2<br>
<input type="checkbox" name="item3" value="item3"> Action Item 3
</div>
</dd>
<hr />
</dl>
</div>
</div>

关于javascript - Bootstrap tokenfield 和 Twitter typeahead 下拉菜单没有样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44160507/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com