本章主要讲解如何实现select下拉列表可输入效果
ps：input提供输入，然后用ul去模拟一个select下拉列表效果即可,关键在于点击div之外的地方隐藏ul，下面是html基本结构：
<div class="input-box"> <input type="text" class="input" value="Holle Word" /> <span class="tip-l"></span> <ul class="dropdown"> <li>Holle Word</li> <li>这是一个测试</li> <li>简单的dome</li> </ul> </div>
css效果 ：
.input-box { position: relative; display: inline-block; } .input-box input { background-color: transparent; background-image: none; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; color: #555; display: block; font-size: 14px; line-height: 1.42857; padding: 6px 6px; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; width: 200px; display: inline; position: relative; z-index: 1; } .tip-l { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 10px solid #555; display: inline-block; right: 10px; z-index: 0; position: absolute; top: 12px; } .dropdown { position: absolute; top: 32px; left: 0px; width: 212px; background-color: #FFF; border: 1px solid #23a8ce; border-top: 0; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; z-index: 999; padding: 0; margin: 0; } .dropdown li { display: block; line-height: 1.42857; padding: 0 6px; min-height: 1.2em; cursor: pointer; } .dropdown li:hover { background-color: #23a8ce; color: #FFF; }
关键点js：
var isBox = false; // 定义一个触发焦点事件的开关，默认为不开启状态 || 也可以给input设置一个属性，来判断 $(".dropdown").hide(); $(".input").focus(function () { // input绑定焦点事件，触发时打开焦点开关 $(this).siblings(".dropdown").show(); isBox = true; }); $(".input-box").mousemove(function () { // 鼠标进入input-box区域内打开焦点开关 isBox = true; }); $(".input-box").mouseout(function () { // 鼠标离开input-box区域内关闭焦点开关 isBox = false; }); $(".input").blur(function () { // input失去焦点时通过焦点开关状态判断鼠标所在区域 if (isBox == true) return false; $(this).siblings(".dropdown").hide(); }); $(".dropdown").find('li').each(function () { // 传值给input，同时关闭焦点开关 $(this).on("click", function () { isBox = false; var text = $(this).text(); $(this).parent().siblings(".input").val(text); $(this).siblings(".dropdown").hide(); }) })通过以上JS 应该能够明白了，通过鼠标的mousemove事件和mouseout事件来判断鼠标位置，利用focus和blur来做点击事件；
单靠click是无法判断鼠标的状态，如果给body绑定click事件，那么，实际上点击input也会触发body的click事件，而input也会触发本身事件，等于触发两次click事件；
原标题：jQuery input 下拉框焦点事件
关键词：jquery
我知道了 