bootstrap-select中addResults选项失效问题求助

我明白你想通过bootstrap-select的addResults选项实现搜索无结果时显示添加新项的提示，但目前只看到默认的“No Results”消息，没出现预期的添加提示。这是因为addResults本身需要配合自定义配置和事件绑定才能生效，我来帮你修正这个问题：

问题根源 #

bootstrap-select的addResults选项默认不会自动生成添加提示，你需要手动自定义无结果状态的文本，同时绑定事件来处理实际的添加逻辑。另外要确保你使用的bootstrap-select版本支持这些功能（推荐v1.13.0及以上）。

修改后的完整代码示例 #

class TodoApp extends React.Component { 
  constructor(props) { 
    super(props); 
  } 

  componentDidMount() { 
    const $select = $(this.selectPicker);
    $select.selectpicker({
      liveSearch: true,
      addResults: true,
      // 自定义无结果文本，包含添加操作链接
      noResultsText: function(term) {
        return `No results found. <a href="javascript:void(0)" class="add-result">Add "${term}"</a>`;
      }
    });

    // 绑定添加新项的点击事件
    $select.on('click', '.add-result', () => {
      const searchTerm = $select.data('selectpicker').liveSearch.$search.val();
      // 创建新选项
      const newOption = new Option(searchTerm, searchTerm, false, false);
      // 添加到原生select并刷新bootstrap-select组件
      $select.append(newOption).selectpicker('refresh');
      // 可选：自动选中刚添加的新选项
      $select.selectpicker('val', searchTerm);
    });
  } 

  render() { 
    return ( 
      <div> 
        <select className="form-control" data-width="100%" ref={el => (this.selectPicker = el)}> 
          <optgroup label="Group 1"> 
            <option defaultValue>Team</option> 
            <option value="1">AAA</option> 
          </optgroup> 
          <optgroup label="Group 2"> 
            <option value="2">BAC</option> 
            <option value="3">BAY</option> 
          </optgroup> 
          <optgroup label="Group 3"> 
            <option value="4">DACA</option> 
          </optgroup> 
        </select> 
      </div> 
    ) 
  } 
} 

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

关键说明 #

• 自定义无结果文本：通过noResultsText函数返回包含添加链接的HTML，这样搜索无结果时会显示带有“Add '搜索词'”的可点击提示。
• 绑定添加事件：监听添加链接的点击事件，获取当前搜索词，创建新的Option元素添加到原生select后，调用selectpicker('refresh')更新组件UI。
• 依赖检查：确保你已正确引入jQuery、Bootstrap（CSS+JS）以及bootstrap-select的CSS和JS文件，版本保持兼容。

这样修改后，当你搜索不存在的内容时，就能看到添加提示，点击后会将搜索词作为新选项添加到下拉框中。

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