jquery input 下拉框(模擬select控件)焦點事件

本章主要講解如何實現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事件；

 ps：input右側的三角只是裝飾作用，為了看起來更像select而已，用層級關系將他放在input下面，這樣不會影響正常focus事件，如果三角需要點擊效果，則需要將層級置頂，或者將input和span做成浮動關系，只不過這樣就得轉化成div焦點事件了（詳細請看我的另一篇文章：http://www.cnblogs.com/ZevEssay/p/5953205.html）