在单击输入字段时,我不想显示或显示所有选项或列表。我只想在输入一些文本时显示。
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<label for="browser">Choose your country:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Australia">
<option value="USA">
<option value="Inda">
<option value="Bhutan">
<option value="Thailand">
<option value="Canada">
<option value="Japan">
<option value="China">
<option value="France">
</datalist>
</body>
</html>
您可以添加一个input
事件侦听器,当用户在字段中键入时添加list
属性。datalist
的id
可以存储在数据属性中
$('input').on('input', function(){
const input = $(this)
if(input.val().length > 0){
input.attr('list', input.data('list'));
} else {
input.removeAttr('list');
}
})
<!DOCTYPE html>
<html>
<body>
<label for="browser">Choose your country:</label>
<input data-list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Australia">
<option value="USA">
<option value="Inda">
<option value="Bhutan">
<option value="Thailand">
<option value="Canada">
<option value="Japan">
<option value="China">
<option value="France">
</datalist>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</body>
</html>