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

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

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

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, .15);
 8     box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
 9     z-index: 9999;
10 }
11
12 .select4_box ul {
13     padding: 0px;
14     margin: 5px;
15 }
16
17 .select4_box ul li {
18     list-style: none;
19     padding: 3px 7px 4px;
20     cursor: pointer;
21 }
22
23 .select4_box ul li:hover {
24     background: #51A9A9;
25     color: #fff;
26 }
27
28 .select4_box ul li.active {
29     background: #3875d7;
30     color: #fff;
31 }

html

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

jQuery插件

 1 (function ($) {
 2     $.fn.extend({
 3         select4: function (options) {
 4             var defaults = {
 5                 ajax_url: true
 6             }
 7             var options = $.extend(defaults, options);
 8
 9             return this.each(function () {
10                 $(".h2").remove();
11                 var mythis = $(this);
12
13                 $(document).on("click", ".select4_box li", function () {
14                     mythis.val($(this).text());
15                     $(".select4_box").remove();
16                 });
17
18                 $(document).click(function (event) {
19                     $(".select4_box").remove();
20                 });
21
22                 $(".select4_box").click(function (event) {
23                     event.stopPropagation();
24                 });
25
26                 mythis.click(function (event) {
27                     var val = $(this).val();
28                     console.log(val);
29                     var mythis = $(this);
30                     var width = $(this).width() + 14 + "px";
31                     var top = $(this).position().top + 30;
32                     var left = $(this).position().left;
33                     $.ajax({
34                         url: options.ajax_url,
35                         dataType: "json",
36                         data: {name: val},
37                         success: function (json) {
38                             if (json.data) {
39                                 var html = ‘<div class="select4_box"><ul>‘;
40                                 $.each(json.data, function (k, v) {
41                                     html += ‘<li alt="‘ + v.id + ‘">‘ + v.name + ‘</li>‘;
42                                 });
43                                 html += ‘</ul></div>‘
44                                 $(".select4_box").remove();
45                                 mythis.after(html);
46                                 $(".select4_box").css({top: top, left: left, width: width});
47                             }
48                         }
49                     });
50                 });
51
52                 mythis.keyup(function (event) {
53                     if (event.keyCode == 40) {
54                         var index = $(".select4_box li.active").index() + 1;
55                         $(".select4_box li").eq(index).addClass(‘active‘).siblings().removeClass(‘active‘);
56                         mythis.val($(".select4_box li.active").text());
57                     } else if (event.keyCode == 38) {
58                         var index = $(".select4_box li.active").index() - 1;
59                         if (index < 0) {
60                             index = $(".select4_box li").length - 1;
61                         }
62                         $(".select4_box li").eq(index).addClass(‘active‘).siblings().removeClass(‘active‘);
63                         mythis.val($(".select4_box li.active").text());
64                     } else if (event.keyCode == 13) {
65                         event.stopPropagation();
66                         alert($(".select4_box li.active").text());
67                         mythis.val($(".select4_box li.active").text());
68                         return false;
69                     } else {
70                         mythis.trigger("click");
71                     }
72                 });
73
74             });
75
76
77         }
78     });
79 })(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)
}