javascript - 如何使用 Chosen 或其他下拉插件在选项名称之前显示额外的跨度？

Question

我需要添加一个下拉列表，当开始输入某个单词时，可以在其中动态过滤选项(正是 Chosen 所做的)并且 span 始终显示在每个选项之前，类似于 Google 云端硬盘搜索栏:

(在这个例子中显示了图标，但我只需要显示一个span标签)

“始终显示”的意思是 span 标签应该在下拉列表的初始显示时显示，而且当选项列表开始被过滤时，或者当一个选项被选中时。

对于 Chosen，我尝试这样做:

$select.on("chosen:showing_dropdown", function() {
  $(".chosen-results").find('li').each(function(index) {
    if(index !== 0) { // ignore the "prompt" li
      var courseName = $(this).html();
      $(this).html("<span style='color: red'>foo</span> " + courseName);
    }
  });
});

它在 Chosen 首次显示下拉列表时有效，但一旦我开始输入内容，过滤后的结果列表就会丢失我的 span 标签。我找不到 a chosen event当列表开始被过滤时触发。

有没有办法通过 Chosen 或任何其他类似插件实现我的需求？

Answer 1

如果我正确理解了您的问题，那么在 <li> 中你想把你的跨度元素？尝试以下:

$select.on("chosen:showing_dropdown", function() {
  $(".chosen-results").find('li').each(function(index) {
    if(index !== 0) { // ignore the "prompt" li
      var courseName = $(this).html();   
       $(this).prepend("<span style='color: red'>foo</span> " + courseName);
    }
  });
});