/** * 此功能与LayUI表单提交按钮 lay-filter="submitBut" 监听冲突 * 冲突内容为回车按键。类型改成type="button",可以躲过监听。 * * **/ (function ($) { $.fn.extend({ "ySearchSelect": function (options) { defaluts.searchName = this.selector; var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数 return this.each(function () { //这里的this 就是 jQuery对象。这里return 为了支持链式调用 init(opts); }); } }); //默认参数 var defaluts = { searchName: '.ySearchSelect' }; var SELECT_VALUE = null; //保存上下键选中的项目的值 var SELECT_INDEX = -1; //保存上下键选中的项目的索引 //初始化插件 function init(o){ $(document).click(function(){ $(".ySearchSelect ul").hide(); $(".ySearchSelect .input-text").hide(); $(".ySearchSelect i.layui-edge").removeClass("select"); }); $(o.searchName+" .layui-input").click(function(event){ //阻止document点击事件 event.stopPropagation(); $(".ySearchSelect ul").hide(); $(".ySearchSelect .input-text").hide(); $(".ySearchSelect i.layui-edge").removeClass("select"); if($(this).siblings(".input-text").length <= 0){ var str = '
'+ ''+ ''+ '
'; $(o.searchName).append(str); } if($(this).siblings("ul").css("display") == "none"){ $(this).siblings("i").addClass("select"); $(this).siblings("ul").show(); $(this).siblings(".input-text").show(); SELECT_VALUE = null; //保存上下键选中的项目的值 SELECT_INDEX = -1; //保存上下键选中的项目的索引 }else{ $(this).siblings("i").removeClass("select"); $(this).siblings("ul").hide(); $(this).siblings(".input-text").hide(); } $(o.searchName+" .input-text input").focus(); $(o.searchName+" .input-text").width($(o.searchName+" ul li").width()+20); //键盘监听事件 $(o.searchName+" .input-text input").keyup(function(event){ if(event.keyCode != 38 && event.keyCode != 40 && event.keyCode != 13){ ySearchSelectMate($(this).val(),o.searchName); //默认搜索过程中第一个项目被选中 SELECT_INDEX = 0; selectKeyUD(event, o.searchName); } }); //选项点击事件 $(this).siblings("ul").find("li").click(function(){ $(this).parent().hide(); $(this).parent().siblings(".input-text").hide(); $(this).parent().siblings("i.layui-edge").removeClass("select"); $(".layui-input").text($(this).text()); $("#cs_country").val($(this).data("c")); }); }); //上下键监听事件 $(o.searchName).keydown(function(event){ selectKeyUD(event, o.searchName); if(event.keyCode == 13){ $(o.searchName+" ul").hide(); $(o.searchName+" .input-text").hide(); $(o.searchName).find("i.layui-edge").removeClass("select"); $(o.searchName).find(".layui-input").text(SELECT_VALUE); } }); } //点击上下按钮的执行方法 function selectKeyUD(event, name){ var nums = $(name+" ul").find("li.on").length; if(event.keyCode == 38){ if(SELECT_INDEX <= 0){ SELECT_INDEX = 0; }else{ SELECT_INDEX--; } } if(event.keyCode == 40){ if(SELECT_INDEX >= nums-1){ SELECT_INDEX = nums-1; }else{ SELECT_INDEX++; } } SELECT_VALUE = $(name+" ul").find(".on").eq(SELECT_INDEX).text(); $(name+" ul").children().removeClass("active"); $(name+" ul").find(".on").eq(SELECT_INDEX).addClass("active"); //上下键跳滚动条 //滑轮的位置 try{ var selectTop = $(name+" ul").find(".on").eq(SELECT_INDEX).position().top; if(selectTop < 41 || selectTop >= 192-5){ if(SELECT_INDEX-4 <= 0){ $(name+" ul").scrollTop(0); }else{ $(name+" ul").scrollTop((SELECT_INDEX-4)*36); } } }catch(e){ //TODO handle the exception // console.log("输入的搜索条件不符合"); } } //匹配搜索,不匹配则隐藏。 function ySearchSelectMate(value,name){ value = $.trim(value.toString()); // 去掉两头空格 if(value == ''){ // 如果搜索框输入为空 $(name+" ul li").attr("class","on"); return false; } var nums = $(name+" ul li").length; $(name+" ul li").attr("class","hide"); for (var i = 0; i < nums; i++) { var pinyin = $("body").val($(name+" ul").children().eq(i).text()).toPinyin().substr(); if(pinyin.toLowerCase().indexOf(value.toLowerCase()) > -1){ $(name+" ul").children().eq(i).attr("class","on"); } } $(name+" ul li:contains('"+value+"')").attr("class","on"); } })(window.jQuery);