TypeAhead.js 和 Bloodhound 显示奇数​​个结果

Posted 2023-05-07

【中文标题】TypeAhead.js 和 Bloodhound 显示奇数​​个结果

【英文标题】：TypeAhead.js and Bloodhound showing an odd number of results

【发布时间】：2015-07-19 11:06:39

【问题描述】：

我的前端有一个 TypeAhead/Bloodhound 实现，它从 Play/Scala 服务器获取 JSON 数据。预输入版本是 0.11.1。实现如下：

html：

<div id="typeahead" class="col-md-8">
   <input class="typeahead form-control"  type="text" placeholder="Select the user">
</div>

javascript：

var engine = new Bloodhound(
  datumTokenizer: function (datum) 
    var fullName = fullName(datum);
    return Bloodhound.tokenizers.whitespace(fullName);
  ,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  identify: function(obj)  return obj.id; ,
  remote: 
    url: routes.controllers.Users.index("").url,
    cache: false,
    replace: function (url, query) 
        if (!isEmpty(query)) 
            url += encodeURIComponent(query);
        
        return url;
    ,
    filter: function (data) 
        console.log(data);
        return $.map(data, function (user) 
            return 
                id: user.id,
                fullName: viewModel.fullName(user)
            ;
        );
    

);

// instantiate the typeahead UI
$('#typeahead .typeahead')
.typeahead(
    hint: true,
    highlight: true,
    minLength: 1,
,

    name: 'engine',
    displayKey: 'fullName',
    source: engine
)

function fullName(data) 
  if (data === undefined) return "";
  else 
    var fName = data.firstName === undefined ? "" : data.firstName;
    var lName = data.lastName === undefined ? "" : data.lastName;
    return fName + ' ' + lName;
  
;

服务器给出的 JSON 响应：

["firstName":"Test","lastName":"User", "id":1, ... ]

服务器对结果进行分页，以便最多提供 5 个结果，这也应该是 Typeahead/Bloodhound 的默认限制。

问题是，当服务器返回5个结果时，typeahead显示0导致叠加。如果服务器提供4个结果，则TypeaHead在叠加中显示1。如果服务器给出3个结果，则typeahead显示2个结果。对于2和1结果，它显示了覆盖层中的正确数量。如果我删除页面长度并且服务器返回超过 10 个结果，则 TypeAhead 显示 5 个结果（限制）。过滤器中的 console.log 显示了正确数量的数据结果，因此它们至少会转到 Bloodhound。

此代码可能是问题？此类型为字段是此页面中唯一存在的typea主体字段。我检查了 DOM，TypeAhead 生成了错误数量的结果集字段，所以这不是 CSS 的问题（也尝试删除所有自定义 CSS）。

感谢任何回复:)

【参考方案1】：

推特据称abandoned该项目。试试the maintained fork。问题已解决。

【讨论】：

我从“***.com/questions/30370496/…”得到了这个问题并尝试了你的答案。它工作得很好。谢谢！希望更多的人可以检查您的解决方案:)

【参考方案2】：

代码中的 typeahead 存在问题：

https://github.com/twitter/typeahead.js/issues/1218

您可以按照问题页面中的说明自行更改 JS 中的代码。

【讨论】：

TypeAhead 确实有问题，修改 typeahead.bundle.js 就像 Stnaire 在 Github-page 帮助中所说的那样。

这浪费了这么多时间，荒谬

【参考方案3】：

尝试使用 engine.initialize() 初始化 engine ；在 filter 返回 suggestion 对象，它应该在 templates -> suggestion 处可用；用source:engine.ttAdapter()在source初始化engine；在suggestion 返回元素为String，以填充“建议”下拉菜单。见Typeahead - examples - Custom Templates

var data = [
  "firstName": "Test",
  "lastName": "User",
  "id": 1
, 
  "firstName": "Test2",
  "lastName": "User2",
  "id": 2
, 
  "firstName": "Test3",
  "lastName": "User3",
  "id": 3
, 
  "firstName": "Test4",
  "lastName": "User4",
  "id": 4
, 
  "firstName": "Test5",
  "lastName": "User5",
  "id": 5
];

var engine = new Bloodhound(
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  local: $.map(data, function(val, key) 
            // return `suggestion` object for `templates` `suggestion`         
            return value:val.firstName, suggestion:val
         )
);
// initialize `engine`
engine.initialize();

// instantiate the typeahead UI
$("#typeahead .typeahead")
  .typeahead(
    hint: true,
    highlight: true,
    minLength: 1,
  , 
    name: "engine",
    displayKey: "firstName",
    templates: 
      suggestion: function (data) 
        // `suggestion` object passed at `engine`
        console.log(data.suggestion);
        // return suggestion element to display
        var _suggestion = "<div>" 
                        + data.suggestion.firstName 
                        + " " 
                        + data.suggestion.lastName + "</div>";
        return _suggestion
      
    ,
    source: engine.ttAdapter()
  );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
<div id="typeahead" class="col-md-8">
  <input class="typeahead form-control" type="text" placeholder="Select the user">
</div>

【参考方案4】：

如果（比如我）你不想进入预输入源，（例如因为你想使用最小版本）你也可以将限制设置得非常高。然后，您必须自己限制要放入列表的项目数量。

$('#typeahead .typeahead')
.typeahead(
    hint: true,
    highlight: true,
    minLength: 1,
,

    name: 'engine',
    displayKey: 'fullName',
    source: engine,
    limit: 1000
)

【参考方案5】：

对于发现此问题的任何人，请使用代码的维护版本。原版是废话。

https://github.com/corejavascript/typeahead.js