шрифт в твиттере не работает

У меня есть сценарий следующим образом

 <script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.js"></script>
<script src="/js/typeahead.js"></script>
<script>
var numbers = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.num); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: [
{ num: 'one' },
{ num: 'two' },
{ num: 'three' },
{ num: 'four' },
{ num: 'five' },
{ num: 'six' },
{ num: 'seven' },
{ num: 'eight' },
{ num: 'nine' },
{ num: 'ten' }
]
});


 // initialize the bloodhound suggestion engine
    numbers.initialize();
    // instantiate the typeahead UI
    $('.men-input-bx .typeahead').typeahead(null, {
    displayKey : 'num',
    source : numbers.ttAdapter()
    });
</script>

и мой html

<input class="men-input-bx typeahead" type="text" spellcheck="false"  />

typeahead.js 0.10.1 jQuery v1.11.0 Bootstrap v3.1.1

Я вижу выпадающий список, как показано ниже? Кто-нибудь испытывает такую ​​же проблему.?

введите здесь описание изображения


jquery twitter-bootstrap twitter-typeahead
person Saurabh Kumar    schedule 02.03.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Поскольку ваш input имеет классы men-input-bx и typeahead, ваш селектор jQuery неверен. В настоящее время вы выбираете элемент .typeahead, который является дочерним элементом элемента .men-input-bx.

Попробуйте это вместо этого:

$('.men-input-bx.typeahead').typeahead(null, { // Removed space after .men-input-bx
    displayKey : 'num',
    source : numbers.ttAdapter()
});
person JamesG    schedule 02.03.2014
comment
Я уже исправил это... извините, не обновил... но все равно похоже, что дроплист не работает... - person Saurabh Kumar; 03.03.2014

arrow_upward
0
arrow_downward

Он не сломан. Стандартный шрифт для твиттера не поставляется с CSS. Вам нужно вставить свой собственный CSS. Я использую следующий CSS, просто скопируйте и вставьте его и используйте его с опережающим вводом

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

.tt-hint {
  color: #999
}

.tt-menu {    /* used to be tt-dropdown-menu in older versions */
  width: 422px;
  margin-top: 4px;
  padding: 4px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
  -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
  box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

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

.tt-suggestion.tt-cursor,.tt-suggestion:hover {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}

person quangthang10d4    schedule 15.12.2015