如何使用Typeahead.js在用户输入时获取无过滤的本地数据集

我来帮你搞定这个需求——不管用户在输入框里敲什么内容，都能返回预设的用户历史记录里的前2项。下面是完整的实现代码：

HTML 结构 #

<div class="summary"> 
  <div class="trip"> 
    <input class="history-data tt-input" type="text" placeholder="Some text" /> 
  </div> 
</div>

JavaScript 逻辑 #

$(document).ready(function() {
  var $stateInput = $("input.history-data");
  
  // 模拟获取本地用户历史数据的函数
  function getData() {
    var userHistory = [
      { userHistory: 'History 1' },
      { userHistory: 'History 2' },
      { userHistory: 'History 3' },
      { userHistory: 'History 4' }
    ];
    return userHistory;
  }

  // 初始化typeahead插件
  $stateInput.typeahead(
    { hint: true, highlight: true, minLength: 1 },
    { 
      name: 'userHistory', 
      limit: 2, // 限制只返回前2项
      source: getData // 数据源指向本地历史数据函数
    });
});

关键说明 #

• limit: 2 是实现需求的核心配置，它会强制typeahead只展示返回数据里的前2条记录
• source: getData 直接把本地的历史数据数组作为数据源，不管用户输入什么内容，都会返回这个数组的内容
• minLength: 1 确保用户输入至少1个字符时就触发提示，你也可以改成0，让用户点击输入框就直接显示历史提示

内容的提问来源于stack exchange，提问作者Thanassis