jquery plugin DataList to achieve a nice look at the input Drop-down list _jquery

HTML5 defines an input box is very nice drop-down list--datalist, but at present its support is not good (evil ie, fortunately you will gradually retire ...). So recently more according to the need to write a small DataList plug-in, compatible to IE8 (IE7 should not how many people use it? )。 The specific requirements for implementation are as follows:

When selected (triggers blur focus) (whether the mouse or tab) empty the input box and display a custom Drop-down list, and then you can use the keyboard up and down keys to choose (the mouse of course there is no reason not to do), Click the left mouse button or the ENTER key to enter the value of the selected list into the input box.

The specific implementation code is as follows:

Html

<! DOCTYPE html>  

CSS (Reset.css is used to initialize the browser defaults, this is STYLE.CSS)

. wrap{margin:0 Auto; font-family: "Microsoft Ya hei"; 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:re Lative}
. select_list li:hover{background-color:red;
input_wrap{position:relative;}

Javascript

/* DataList 0.1 custom DataList Plug-ins to achieve HTML5 INPUT element DataList effect compatible ie8+,firefox,chrome and other common browsers/;(function ($,window,docum ent,undefined) {//undefinde is a true undefined, not a parameter//pass the selectable variable to the method//define constructor var datalist=function (ele,opt) {this. $ele
    Ment=ele; this.defaults={' bgcolor ': ' green ', ' widths ': 1, ' Heights ': 1}, This.options=$.extend ({}, This.def
  Aults, opt);
      }//Definition Method datalist.prototype={showlist:function () {var color=this.options.bgcolor;
      var width=this.options.widths; var height=this.options.heights; Attribute value var obj=this. $element;
      OBJ is the outermost parcel of the div and the like elements, should have positive:relative properties, convenient DataList positioning. var input=$ (obj). Children (). EQ (0); INPUT element var inputul=$ (obj). Children (). EQ (1); DataList element//Set pop-up DataList size and Style $ (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");
      });
          When the focus becomes empty again, you can also change the display and hide $ (input) for a default value of//datalist. Focus (function () {if ($ (this). Val ()!= "") {
        $ (this). Val ("");

        } $ (Inputul). Slidedown (500); var n=-1; Record position,-1 indicates unchecked. Press ENTER when n=-1 the default is the penultimate first $ (document). KeyDown (function (event) {/* Click the keyboard up and down key, DataList change * * STOPD
          Efaultandbubble (event); if (event.keycode==38) {//Up button 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) {//Up button 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 key $ (Inputul). Children (' Li '). EQ (n). Mouseout ();
            $ (input). val ($ (Inputul). Children (' Li '). EQ (n). text ());
          N=-1;


        }
        }); Remove browser default function Stopdefaultandbubble (e) {e=e| |
          window.event;
          Block default behavior if (e.preventdefault) {e.preventdefault ();

          } E.returnvalue=false;
          Block bubbling 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;
    Use the DataList object $.fn.mydatalist=function (Options) {///create entity Var datalist=new DataList (This,options) in the plug-in;
  Call its method return Datalist.showlist ();

 }) (jquery,window,document);

Here with the UL Li List simulation DataList options. The implementation of the logic is very simple, slightly need to pay attention to the point is div.input_wrap is used relative positioning, convenient ul.input1_ul relative positioning. Because the requirements have a lot of input boxes and do not affect each other, so here is the INPUT1. At least it was the first plugin I developed myself, Mark.

Requires code that can be poked https://github.com/codetker/myDatalist.

The above mentioned is the entire content of this article, I hope you can enjoy.