datalist联想是什么事件触发的?实现datalist点击即显示所有联想

本文介绍了如何在保持datalist联想功能的同时,让用户在点击input时仍显示全部option的选择。关键在于修改input的onmousedown事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

因为项目需要,现在需要实现这样一个工能:datalist联想仍然可以使用,但当用户点击绑定datalist的input的时候,仍然可以显示出所有的option!这个扯淡的功能让我荒废了近两个钟头才搞明白。。。

这个问题的核心其实就是要明白:datalist联想弹出的触发事件是onmousedown

搞明白这个问题就简单了,上代码:

 html:

<label class="control-label">日志类型</label>
<input class="form-control" placeholder="info" value=""
       id="log_type" list="log_type_list" onmousedown="$('#log_type').val('')">
<datalist id="log_type_list">
    <option value="info">info</option>
    <option value="error">error</option>
    <option value="info_all">info_all</option>
    <option value="warn">warn</option>
</datalist>

没错,给input加上一个οnmοusedοwn="$('#log_type').val('')就可以解决了。。。哎。。。。。。。