<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow" />
<meta name="author" content="codetker" />
  <title> 表單選中彈出框</title>
<link href="css/reset.css" type="text/css" rel="Stylesheet" /> 
<link href="css/master.css" type="text/css" rel="Stylesheet" /> 

<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
</head>

<body>
  <div class="wrap">
    <form class="center">
      <div class="input_wrap">
        <input name="input1" class="input input1" type="text"/>
        <ul class="input1_ul select_list">
          <li>問題1</li>
          <li>問題2</li>
          <li>問題3</li>
          <li>問題4</li>
          <li>問題5</li>
        </ul>
      </div>
    </form>
  </div>
<script type="text/javascript" src="js/jquery.codetker.datalist.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".input_wrap").myDatalist({"bgcolor":"red","widths":1,"heights":1}); 
});
</script>
</body>
</html>

CSS(reset.css里面是初始化瀏覽器默認(rèn)值用的，這里是style.css)

.wrap{ margin:0 auto; font-family: "微軟雅黑";font-size: 14px;}
.center{ margin: 0 auto; width:500px;}
.input{ margin: 0; padding: 0; /*border:none;*/ width:140px; height: 24px; float:left;}
.select_list{display: none; position:absolute; z-index: 100;}
.select_list li{ height:24px; margin: 0; padding: 0; background-color: #fff; cursor: pointer; list-style: none; position:relative;}
.select_list li:hover{ background-color: red;}
.input_wrap{ position:relative; }

JavaScript

/*
  datalist 0.1 
  自定義datalist插件，實現(xiàn)html5中input元素datalist的效果
  兼容IE8+,Firefox,Chrome等常見瀏覽器
*/

;(function($,window,document,undefined){ //undefinde是真實的undefined，并非參數(shù)
  //將可選擇的變量傳遞給方法

  //定義構(gòu)造函數(shù)
  var Datalist=function(ele,opt){
    this.$element=ele;
    this.defaults={
      'bgcolor':'green',
      'widths':1,
      'heights':1
    },
    this.options=$.extend({}, this.defaults, opt);
  }
  //定義方法
  Datalist.prototype={
    showList:function(){
      var color=this.options.bgcolor;
      var width=this.options.widths;
      var height=this.options.heights; //屬性值

      var obj=this.$element; //obj為最外層包裹的div之類的元素，應(yīng)該擁有positive：relative屬性,方便datalist定位。
      var input=$(obj).children().eq(0); //input元素
      var inputUl=$(obj).children().eq(1); //datalist元素
      //設(shè)置彈出datalist的大小和樣式
      $(inputUl).css({
        "top":$(input).outerHeight()+"px",
        "width":$(input).outerWidth()*width+"px"
      });
      $(inputUl).children().css({
        "width":$(input).outerWidth()*width+"px",
        "height":$(input).outerHeight()*height+"px"
      });

      $(inputUl).children('li').mouseover(function() {
        $(this).css("background-color",color);
        $(this).siblings().css("background-color","#fff");
      });
      $(inputUl).children('li').mouseout(function() {
        $(this).css("background-color","#fff");
      });
      //再次focus變?yōu)榭?，也可以改為某個默認(rèn)值
      //datalist的顯示和隱藏
      $(input).focus(function() {
        if($(this).val()!=""){
          $(this).val("");
        }
        $(inputUl).slideDown(500);

        var n=-1; //記錄位置,-1表示未選中。當(dāng)n=-1時直接按enter瀏覽器默認(rèn)為倒數(shù)第一個
        $(document).keydown(function(event) {
          /* 點擊鍵盤上下鍵，datalist變化 */
          stopDefaultAndBubble(event);
          if(event.keyCode==38){//向上按鈕
            if(n==0||n==-1){
              n=4;
            }else{
              n--;
            }
            $(inputUl).children('li').eq(n).siblings().mouseout();
            $(inputUl).children('li').eq(n).mouseover();
          }else if(event.keyCode==40){//向上按鈕
            if(n==4){
              n=0;
            }else{
              n++;
            }
            $(inputUl).children('li').eq(n).siblings().mouseout();
            $(inputUl).children('li').eq(n).mouseover();
          }else if(event.keyCode==13){//enter鍵
            $(inputUl).children('li').eq(n).mouseout();
            $(input).val( $(inputUl).children('li').eq(n).text() );
            n=-1;
          }
        });


        //去掉瀏覽器默認(rèn)
        function stopDefaultAndBubble(e){
          e=e||window.event;
          //阻止默認(rèn)行為
          if (e.preventDefault) {
            e.preventDefault();
          }
          e.returnValue=false;

          //阻止冒泡
          if (e.stopPropagation) {
            e.stopPropagation();
          }
          e.cancelBubble=true;
        }

      });
      $(input).blur(function() {
        $(inputUl).slideUp(500);
      });
      $(inputUl).delegate('li', 'click', function() {
          $(input).val( $(this).text() );
      });

      return this;
    }
  }
  //在插件中使用Datalist對象
  $.fn.myDatalist=function(options){
    //創(chuàng)建實體
    var datalist=new Datalist(this,options);
    //調(diào)用其方法
    return datalist.showList();
  }
 
})(jQuery,window,document);

這里用ul li列表模擬datalist options。實現(xiàn)邏輯非常簡單，稍微需要注意點的是div.input_wrap是用相對定位的，方便ul.input1_ul相對進(jìn)行定位。由于需求有很多的輸入框且相互之間不影響，因此這里是input1。好歹是我自己開發(fā)的第一個插件，mark一記。

需要代碼的可以戳https://github.com/codetker/myDatalist。

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: