jquery imitation Baidu search drop-down box plug-in

Today wrote a drop-down plugin to share it
Effect:can search the vegetarian, alsoYou can use the up and down keys to select the matching values

Css

. select4_box{border:1px Solid #5897fb;p osition:absolute;width:250px;background: #fff; border-radius:4px;- webkit-box-shadow:0 4px 5px rgba (0, 0, 0,.), box-shadow:0 4px 5px rgba (0, 0, 0,.); z-index:9999;}. Select4_box ul{padding:0px;margin:5px;}. Select4_box ul li{list-style:none;padding:3px 7px 4px; cursor:pointer;}. Select4_box ul li:hover{background: #51A9A9; color: #fff;}. Select4_box ul li.active{background: #3875d7; color: #fff;}

Html

<input type= "text"  name= "Shoushuid"  class= "Shoushuid"  autocomplete= "off" ><input type= "text"  name= "Jiancha_xiangmu"  class= "Jiancha_xiangmu"  autocomplete= "Off" >

jquery Plugin

(function ($) {$.fn.extend ({select4:function (options) {var defaults = {Ajax_url:true            } var options = $.extend (defaults, options);                                Return This.each (function () {$ (". H2"). Remove ();                var mythis = $ (this);                    $ (document). On ("click", ". Select4_box li", function () {mythis.val (). text ());                $ (". Select4_box"). Remove ();                });                $ (document). Click (Function (Event) {$ (". Select4_box"). Remove ();                });                $ (". Select4_box"). Click (Function (event) {event.stoppropagation ();                });                    Mythis.click (function (event) {var val = $ (this). Val ();                    Console.log (Val);                    var mythis = $ (this);                    var width = $ (this). Width () +14+ "px"; var top = $ (this). Position (). top+30;                    var left = $ (this). Position (). Left; $.ajax ({url:options.ajax_url, DataType: "JSON", Data:                                {Name:val}, Success:function (JSON) {if (json.data) {                                var html = ' <div class= ' select4_box ' ><ul> '; $.each (Json.data,function (k,v) {html + = ' <li alt= "' +v.id+ '" > ' +v.name+ ' </li>                                ‘;                                });                                html+= ' </ul></div> ' $ (". Select4_box"). Remove ();                                Mythis.after (HTML);                            $ (". Select4_box"). css ({top:top,left:left,width:width});                }                        }                    });                });         Mythis.keyup (function (event) {           if (event.keycode==40) {var index = $ (". Select4_box li.active"). Index () +1;                        $ (". Select4_box li"). EQ (index). addclass (' active '). Siblings (). Removeclass (' active ');                    Mythis.val ($ (". Select4_box li.active"). Text ());                        }else if (event.keycode==38) {var index = $ (". Select4_box li.active"). Index ()-1;                        if (index<0) {index = $ (". Select4_box li"). Length-1;                        } $ (". Select4_box li"). EQ (index). addclass (' active '). Siblings (). Removeclass (' active ');                    Mythis.val ($ (". Select4_box li.active"). Text ());                        }else if (event.keycode==13) {event.stoppropagation ();                        Alert ($ (". Select4_box li.active"). Text ());                        Mythis.val ($ (". Select4_box li.active"). Text ()); RetuRN false;                    }else{Mythis.trigger ("click");            }                });                    }); }    });}) (JQuery);

Use

<script>$ (function () {    //ajax_url) is the AJAX data address of this input binding    (". Jiancha_xiangmu "). Select4 ({" Ajax_url ":"/jiancha/select "});      $(". Shoushuid "). Select4 ({" Ajax_url ":"/jiancha/select "});    </script>

This Ajax data must be in this format, of course, you can also change, plugins where I write should be able to read

Ajax data, I am using the Go language backstage, you can also change into your familiar language

Func (this *jianchacontroller) Select () {var name = this. GetString ("name") Where: = models. Newwhere () If name = "" "{where[" like__name "] ="% "+ name +"% "}data, _: = models. M ("Jiancha"). where (where). Select () this. Ajaxreturn (1, "OK", data)}

jquery imitation Baidu search drop-down box plug-in