Question

我正在尝试创建一个表格。我使用的是<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>

Answer 1

此代码应该可以工作，但是请记住您正在使用datalist元素，并且不能通过js强制也不通过css对其进行样式设置。如果要设置选项元素的某些部分的样式，请使用选择元素而不是数据列表。

$(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>

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

1 个答案: