Question

我试图通过在当前建议列表的顶部添加新建议（基于全文搜索的输入上下文）来在“中”网站上实现搜索输入。我在一个angular 5项目上，我使用typeahead作为研究模块。

这就是我在预先输入列表上添加新建议的方法：

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'）时，什么也不会发生。 enter image description here

任何帮助，请!!!

Angular 5-如何在DOM元素上动态添加事件？

0 个答案: