时间戳

首页 > 解决方案 > 选择 js 中断选项和重复输入

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

问题描述

**嘿 **

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

设想：

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

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

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

脚本.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>

一些图片来说明：

文字输入前

文字输入后

标签： javascriptphpjqueryjquery-pluginsselectize.js

解决方案

很可能您有一些样式会覆盖默认样式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>

推荐阅读