时间戳

首页 > 解决方案 > 如何在按键上更改选择的颜色

javascript - 如何在按键上更改选择的颜色

问题描述

我正在尝试创建一个表单。我使用<datalist>标签和<input>标签，这样用户也可以键入一个选项或通过单击这些选项来选择一个选项。我想让用户使用输入来搜索选项。我希望这个选项在按键上不断改变颜色。

例子：

当一个选项可用，声明“Hello”并且用户开始输入前几个字符（例如“He”）时，输入的部分应该变成粗体并且应该检测到与其相关的“Hello”选项。

是否可以使用 jQuery 来实现这一点，如果可以，我该怎么做？

<div class="cargo blocos">
  <label class="titulos">Cargo</label>
  <input class="custom-select" type="text" list="cargos" placeholder="Ex: Analista de Banco de Dados" required />
  <span class="invalid-feedback">Cargo é obrigatório</span>
  <datalist id="cargos">
    <option>Analista de RH</option>
    <option>Analista de Marketing</option>
  </datalist>
</div>

标签： javascriptjqueryhtmlcssforms

解决方案

此代码应该可以工作，但请记住您使用的是 datalist 元素，它不能通过 css 设置样式，也不能由 js 强制。如果要设置选项元素的某些部分的样式，请使用 select 元素而不是 datalist。

$(document).ready( function() {
  $('.custom-select').on('keyup', function() {
    checkValues($(this).val());
  });
});

function checkValues(val) {
  var options = $('#cargos option');
  var valLength = val.length;
  $('#cargos option').each( function() {
    var begins = $(this).text().indexOf(val);
    $(this).html(begins === 0 ? '<strong>' + $(this).text() + '</strong>' : $(this).text());
  })
}
<html>
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
	<div class="cargo blocos">
	     <label class="titulos">Cargo</label>
	     <input class="custom-select" type="text" list="cargos" placeholder="Ex: Analista de Banco de Dados" required />
	     <span class="invalid-feedback">Cargo é obrigatório</span>
	           <datalist id="cargos">
	                <option>Analista de RH</option>
	                 <option>Analista de Marketing</option>
	                 <option>Retrasado de Marketing</option>
	            </datalist>
	</div>
</body>

推荐阅读