Bootstrap Typeahead：minlength与items失效及滚动条添加方案咨询

嘿，我来帮你搞定这两个问题！咱一步一步来：

一、items/minLength参数失效的解决方法 #

参数不生效大概率是踩了这几个坑，你对照着排查：

1. 参数名拼写错误（最常见！） #

Bootstrap Typeahead的minLength参数是大写L，很多人会写成小写的minlength，直接导致参数被忽略！另外items要传数字类型，别传字符串。

2. 初始化时机不对 #

一定要等AJAX数据加载完成、生成好数据源之后，再初始化Typeahead。如果提前初始化，数据源是空的，参数自然不会生效。

修正后的完整代码示例 #

$.ajax({
  type: "GET",
  url: "https://jsonplaceholder.typicode.com/comments",
  dataType: "json", // 这里直接用json，不用转text再parse更省心
  success: function(data) {
    processData(data);
  }
});

function processData(data) {
  // 提取name字段生成数据源，用map简化代码
  var nameList = data.map(item => item.name);
  
  // 初始化Typeahead，注意参数的正确写法
  $('#your-input-element-id').typeahead({
    minLength: 2, // 输入至少2个字符才触发提示
    items: 5,     // 最多显示5个建议项
    source: nameList
  });
}

额外注意：版本兼容性 #

如果你用的是Bootstrap 3及以上版本，官方已经把Typeahead移除了，需要用独立的typeahead.js插件。这种情况下参数写法一致，但要确保插件正确引入。

二、建议项超过5个时添加滚动条 #

只需要加几行自定义CSS就能实现，根据你用的Typeahead版本选择对应的代码：

情况1：使用原生Bootstrap 2.x自带的Typeahead #

.typeahead.dropdown-menu {
  max-height: 200px; /* 可根据需求调整高度 */
  overflow-y: auto;
  overflow-x: hidden; /* 防止出现横向滚动条 */
}

情况2：使用独立的typeahead.js插件（Bootstrap 3+常用） #

.tt-menu {
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
}

这样当建议项超过5个时，下拉框就会出现垂直滚动条，不会撑得太长啦！

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