选择 js 中断选项和重复输入

Posted 2023-05-09

【中文标题】选择 js 中断选项和重复输入

【英文标题】：selectize js breaking options and repeating input

【发布时间】：2021-01-14 13:48:24

【问题描述】：

**嘿**

我在选择下拉菜单时遇到问题。 每当我从下拉列表中单击任何选项时，一切都很好... 但是，当我在字段上输入任何文本时，选项会变得很奇怪......看起来它正在重复我输入的文本输入。 尝试删除高亮功能但没有结果。

场景：

在 wordpress 子主题上使用 Selectize 的最新版本。

使用 dist/js/standalone 中的 selectize.js 和 selectize.min.js。

使用正在处理子文件夹的包含脚本。

script.js

$(document).ready(function()
$('#search').selectize(highlight: false)
);

选择列表

<div class="exampleSearch">
    <select  placeholder="Choose some technologies..." id="search" multiple="multiple">
       <option value="1">Sample Value 1</option>
       <option value="2">Sample Value 2</option>
       <option value="3">Sample Value 3</option>
    </select>
    <input type="submit" value="Save" class="btn n-btn-flat">
</div>

一些图片来说明：

Before text input

after text input

【参考方案1】：

很可能您的某些样式覆盖了 selectize 的默认样式并导致此问题。

看看下面的工作示例：

$(document).ready(function() 
  $('#search').selectize(
    highlight: true
  )
);

<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.default.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js"></script>
<div class="exampleSearch">
  <select placeholder="Choose some technologies..." id="search" multiple="multiple">
    <option value="1">Sample Value 1</option>
    <option value="2">Sample Value 2</option>
    <option value="3">Sample Value 3</option>
  </select>
  <input type="submit" value="Save" class="btn n-btn-flat">
</div>

【讨论】：

试图删除我所有的 childtheme 包括，本地选择和 css 并从

@AndréGarcia 应该这样做以突出显示某些跨度中的匹配文本并保留另一个跨度以突出显示不匹配的项目。