twitter-typeahead 不自动完成或选择答案

【问题标题】：twitter-typeahead not autocompleting or selectingtwitter-typeahead 不自动完成或选择
【发布时间】：2016-11-26 10:58:27
【问题描述】：

使用 Twitter typeahead 获得一些奇怪的行为。它正确地获取数据并在输入 3 个字符后显示一个下拉列表，但它不会自动完成该字段，也不会突出显示/选择该项目。我做错了什么？

我有以下 javascript（在所有相关的 jquery 和 typeahead 之后）：

$(function ()
{

    var customers = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            url: '/api/customers?query=%QUERY',
            wildcard: '%QUERY'
        }
    });

    $('#customer').typeahead
    (
        {
            minLength: 3,
            highlight: true
        },
        {
            name: 'customers',
            display: 'name',
            source: customers
        }
    );


});

网页的相关部分

<form>
    <div class="form-group">
        <label>Customer</label>
        <input id="customer" type="text" value="" class="form-control" />
    </div>
    <div class="form-group">
        <label>Movie</label>
        <input id="movie" type="text" value="" class="form-control" />
    </div>
    <button class="btn btn-primary">Submit</button>
</form>

还有css：

.typeahead {
  background-color: #fff;
}

.typeahead:focus {
  border: 2px solid #0097cf;
}

.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 {
  width: 422px;
  margin: 12px 0;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  -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;
  font-size: 18px;
  line-height: 24px;
}

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

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

}

.tt-suggestion p {
  margin: 0;
}

它似乎被渲染为：

<input id="customer" type="text" value="" class="form-control tt-input" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;">

正如它所说，这很有趣

autocomplete="off"

但改变它并没有帮助......

【问题讨论】：

标签： twitter-typeahead

【解决方案1】：

事实证明，我的控制器返回的是 IHttpActionResult，而不是我期待的 IEnumerable<Customer>。我不知道这是否是问题所在，但现在我已经解决了这个问题，它可以工作了..

【讨论】：