jquery 仿百度搜索下拉框的插件

转载地址：http://www.open-open.com/lib/view/open1420624048437.html

今天写了个下拉插件分享出来 
效果： , 可以搜素，也可以使用上下键选择匹配出来的值

css

 .select4_box {
     border: 1px solid #5897fb;
     position: absolute;
     width: 250px;
     background: #fff;
     border-radius: 4px;
     -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
     box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
     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插件

 (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($(this).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 ) {
                             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);

使用

<script>
$(function(){
    //ajax_url是这个input绑定的ajax数据地址
    $(".Jiancha_xiangmu").select4({"ajax_url":"/jiancha/select"});
    $(".Shoushuid").select4({"ajax_url":"/jiancha/select"});
});
</script>

这个ajax的数据必须是这种格式的，当然你也可以改，插件那里我写的应该都能看懂

ajax数据，我后台使用的是go语言，你也可以换成你熟悉的语言

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)
}