标签：
转载地址：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)
}标签：
原文地址：http://www.cnblogs.com/luyanliang/p/5445918.html
