杰晶网络

jQuery插件datalist实现很好看的input下拉列表
网络编程 2024/11/9 佚名
3 2

HTML5中定义了一种input框很好看的下拉列表--datalist，然而目前它的支持性并不好(万恶的IE，好在你要渐渐退役了...)。于是最近更据需求写了一个小型datalist插件，兼容到IE8(IE7应该没多少人用了吧？)。实现的具体需求如下:

      当被选中的时候(触发blur焦点)(不管是鼠标还是tab键)清空input框并且显示自定义的下拉列表,然后可以用键盘的上下键选择(鼠标当然肯定没理由不可以啦)，单击鼠标左键或者enter键将选中的列表的值输入到input框。

      具体的实现代码如下：

HTML

<!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="/UploadFiles/2021-04-02/jquery-1.11.0.js">


CSS(reset.css里面是初始化浏览器默认值用的，这里是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插件，实现html5中input元素datalist的效果
  兼容IE8+,Firefox,Chrome等常见浏览器
*/

;(function($,window,document,undefined){ //undefinde是真实的undefined，并非参数
  //将可选择的变量传递给方法

  //定义构造函数
  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之类的元素，应该拥有positive：relative属性,方便datalist定位。
      var input=$(obj).children().eq(0); //input元素
      var inputUl=$(obj).children().eq(1); //datalist元素
      //设置弹出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变为空，也可以改为某个默认值
      //datalist的显示和隐藏
      $(input).focus(function() {
        if($(this).val()!=""){
          $(this).val("");
        }
        $(inputUl).slideDown(500);

        var n=-1; //记录位置,-1表示未选中。当n=-1时直接按enter浏览器默认为倒数第一个
        $(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;
          }
        });


        //去掉浏览器默认
        function stopDefaultAndBubble(e){
          e=e||window.event;
          //阻止默认行为
          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){
    //创建实体
    var datalist=new Datalist(this,options);
    //调用其方法
    return datalist.showList();
  }
 
})(jQuery,window,document);







      这里用ul li列表模拟datalist options。实现逻辑非常简单，稍微需要注意点的是div.input_wrap是用相对定位的，方便ul.input1_ul相对进行定位。由于需求有很多的输入框且相互之间不影响，因此这里是input1。好歹是我自己开发的第一个插件，mark一记。


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


以上所述就是本文的全部内容了，希望大家能够喜欢。
标签：
jQuery,datalist,下拉列表
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/9

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网