Angular 5 - Как динамически добавить событие в элемент DOM? - PullRequest
Новая
       9

Angular 5 - Как динамически добавить событие в элемент DOM?

0 голосов
/ 22 ноября 2018

Я пытаюсь реализовать поисковый ввод как входящий на веб-сайт «Средний», добавив новое предложение (на основе контекста ввода для полнотекстового поиска) в верхней части списка текущих предложений.Я нахожусь на угловом 5 проекте, и я использую typeahead для исследовательского модуля.

Итак, вот как я могу добавить новое предложение в список top-type typehead: 

var nba = [{
  "team": "Boston Celtics"
}, {
  "team": "Dallas Mavericks"
}, {
  "team": "Brooklyn Nets"
}, {
  "team": "Houston Rockets"
}, {
  "team": "New York Knicks"
}, {
  "team": "Memphis Grizzlies"
}, {
  "team": "Philadelphia 76ers"
}, {
  "team": "New Orleans Hornets"
}, {
  "team": "Toronto Raptors"
}, {
  "team": "San Antonio Spurs"
}];
var teams = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  local: nba
});
var search = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  local: [{
    'team': 'xxxxx'
  }]
});

$('#multiple-datasets .typeahead').typeahead({
    highlight: true,
    hint: false,
    minlenght: 2
  },

  {
    name: 'search-in-team',
    display: 'team',
    source: teams,
    templates: {
      header: '<div class="group">Teams</div>'
    }
  });

$('.typeahead').bind('typeahead:render', (event, suggestions, async, dataset) => {
  $('.tt-dataset').prepend('<div class="tt-suggestion tt-selectable added" > <span class="strong"> Search for "' + $('.typeahead').val() + '"</span></div>');
});

$('.typeahead').bind('typeahead:select', (ev, suggestion) => {
  alert(suggestion.team)
});
.group {
  padding: .5rem .5rem 0rem .5rem;
  font-family: $avenir_next;
  color: $color-47;
  border-bottom: 1px solid grey;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>

<div id='multiple-datasets'>
  <input type="text" id="sskSearch" class="typeahead" placeholder="Search">
</div>

У меня появляется предупреждение, когда я нажимаю на предложение в разделе "Команды", но ничего не происходит, когда я нажимаю на новый первый элемент, который я добавил вручную ("Поиск 'xxxx'). введите описание изображения здесь

Любая помощь Пожалуйста!

...