jquery imitation Baidu search drop-down box plug-in

Reprint Address: http://www.open-open.com/lib/view/open1420624048437.html

Today wrote a drop-down plugin to share it
Effects: You can search for a value, or you can use the up and down keys to select a match.

Css

1 . Select4_box {2 border:1px solid #5897fb;3 Position:absolute;4 width:250px;5 background: #fff;6 border-radius:4px;7 -webkit-box-shadow:0 4px 5px rgba (0, 0, 0,.);8 box-shadow:0 4px 5px rgba (0, 0, 0,.);9 z-index:9999;Ten } One  A . Select4_box ul { - padding:0px; - margin:5px; the } -  - . Select4_box ul li { - List-style:none; + padding:3px 7px 4px; - Cursor:pointer; + } A  at . Select4_box ul li:hover { - background: #51A9A9; - color: #fff; - } -  - . Select4_box ul li.active { in background: #3875d7; - color: #fff; to}

Html

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

jquery Plugin

1 (function ($) {2 $.fn.extend ({3 select4:function (options) {4 var defaults = {5 ajax_url:true6             }7 var options = $.extend (defaults, options);8 9 return This.each (function () {Ten $ (". H2"). Remove (); One var mythis = $ (this); A  - $ (document). On ("click", ". Select4_box li", function () { - Mythis.val ($ (this). text ()); the $ (". Select4_box"). Remove (); -                 }); -  - $ (document). Click (Function (event) { + $ (". Select4_box"). Remove (); -                 }); +  A $ (". Select4_box"). Click (Function (event) { at event.stoppropagation (); -                 }); -  - Mythis.click (function (event) { - var val = $ (this). Val (); - Console.log (val); in var mythis = $ (this); - var width = $ (this). Width () + + + "px"; to var top = $ (this). Position (). Top + +; + var left = $ (this). Position (). Left; - $.ajax ({ the Url:options.ajax_url, * dataType: "JSON", $ data: {name:val},Panax Notoginseng success:function (JSON) { - if (json.data) { thevar html = '<Divclass= "Select4_box"><ul>'; + $.each (Json.data, function (k, v) { AHTML + = '<Lialt= "' + v.id + '">' + V.name + '</Li>'; the                                 }); +HTML + = '</ul></Div>' - $ (". Select4_box"). Remove (); $ mythis.after (HTML); $ $ (". Select4_box"). CSS ({top:top, left:left, width:width}); -                             } -                         } the                     }); -                 });Wuyi  the Mythis.keyup (function (event) { - if (Event.keycode = =) { Wu var index = $ (". Select4_box li.active"). Index () + 1; - $ (". Select4_box li"). EQ (index). addclass (' active '). Siblings (). Removeclass (' active '); About Mythis.val ($ (". Select4_box li.active"). Text ()); $ } else if (Event.keycode = =) { - var index = $ (". Select4_box li.active"). Index ()-1; -if (index<0) { - Index= $ (". Select4_boxli "). Length-1; A                         } + $ (". Select4_box li"). EQ (index). addclass (' active '). Siblings (). Removeclass (' active '); the Mythis.val ($ (". Select4_box li.active"). Text ()); - } else if (Event.keycode== ) { $ event.stoppropagation (); the Alert ($ (". Select4_box li.active"). Text ()); the Mythis.val ($ (". Select4_box li.active"). Text ()); the return false; the } else { - Mythis.trigger ("click"); in                     } the                 }); the  About             }); the  the  the         } +     }); - }) (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