10
मेरे पास एक ऐप है जो बूटस्ट्रैप 3 और टाइपहेड का उपयोग करता है। किसी कारण से, जैसे ही मैं Typeahead.js जोड़ता हूं, स्टाइल गलतफहमी हो जाती है, आप this JSFiddle के साथ देख सकते हैं। निम्नलिखित एचटीएमएल बहुत अच्छा लग रहा है:मिक्सिंग Typeahead.js और बूटस्ट्रैप 3
<div class="container" style="padding:3rem;">
<form class="form-horizontal">
<div class="form-group">
<div class="input-group">
<input type="search" class="form-control" id="myQuery">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span id="searchIndexButton">Item 1</span> <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
</div>
</form>
</div>
जैसे ही मैं इसे नीचे दिखाए गए टाइपहेड के साथ प्रारंभ करता हूं, यह भयानक लगता है।
$(function() {
var data = [
{ id:1, name:'Tiger' },
{ id:2, name:'Bear' }
];
var bh = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: data
});
$('#myQuery').typeahead(null, {
minLength: 1,
name: 'suggestions',
source: bh,
display: 'name'
});
});
आप .twitter-Typeahead में जोड़ देते हैं तो {चौड़ाई: 100%; मार्जिन टॉप: 4 पीएक्स; } आप मूल के करीब कुछ मिलता है। – JonSG
@ जोन्सएसजी - दुर्भाग्यवश, यह एम के लिए काम नहीं किया। –