jquery搜索选择

Html

Css


    
        
        搜 索

* {
	margin:0;
	padding:0;
	box-sizing:border-box;
}
.wyInput {
	width:300px;
	margin:20px auto;
	padding:10px 10px;
	background:#EEE4D8;
	border-radius:5px;
	border:1px solid #B4B3AE;
	position:relative;
}
.wyInput .wyinput-group {
	width:100%;
	height:30px;
	overflow:hidden;
}
.wyInput .wyinput-group input {
	width:80%;
	height:30px;
	line-height:30px;
	border:1px solid #B4B3AE;
	float:left;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	padding:0 5px;
}
.wyInput .wyinput-group a {
	float:left;
	width:20%;
	background:#219FB6;
	color:#fff;
	height:30px;
	line-height:30px;
	font-size:14px;
	font-weight:bold;
	text-decoration:none;
	text-align:center;
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
}
.wyInput .wyinput-group a:hover {
	background:#35ACC1;
}
.wyInput .wyinput- {
	position:absolute;
	top:40px;
	z-index:1000;
	background:#F2F2F2;
	border:1px solid #EEE4D8;
	border-top-color:transparent;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	padding:5px 5px;
}
.wyInput .wyinput- p a {
	text-decoration:none;
	color:#333;
	font-size:14px;
	width:100%;
	height:24px;
	line-height:24px;
	display:block;
}
.wyInput .wyinput- p a:hover {
	color:#fff;
	background:#35ACC1;
}

(function($) {
    $.fn.extend({
        "wy_inselect": function(options) {
            if (!isValid(options)) return this;
            var $Id = $(this);
            var last;
            $Id.find(".wyinput-").css("width", $(".wyinput-group input").outerWidth() + "px").hide();
            $Id.find(".wyinput-group input").keyup(function(event) {
                last = event.timeStamp;
                setTimeout(function() { //设时延迟0.5s执行
                    if (last - event.timeStamp == 0)
                    //如果时间差为0（也就是你停止输入0.5s之内都没有其它的keyup事件发生）
                    {
                        var arr = searchIndex($Id, options);
                        load($Id, arr);
                    }
                }, 500);

})
            $Id.find(".wyinput-").delegate(".-line a", "click", function() {
                var html = $(this).html();
                console.log(html)
                $(this).parents(".wyinput-").siblings(".wyinput-group").find("input").val(html);
                $Id.find(".wyinput-").hide()
            })

}
    })

//监测参数是否合法
    function isValid(options) {
        return !options || (options　 && typeof options === "object") ? true : false;
    }

//加载下拉框
    function load($Id, arr) {
        var html = "";
        if (arr.length == 0) {
            $Id.find(".wyinput-").hide().html("");
            return;
        }
        $.each(arr, function(idx, obj) {
            html += '<p class="-line">' + '<a href="###">' + obj.name + '</a></p>';
        })
        $Id.find(".wyinput-").html(html).show();
    }

//模糊查询
    function searchIndex($Id, options) {
        var $input = $Id.find(".wyinput-group input");
        var keywords = $input.val();
        var arr = [];
        if (keywords == "" || keywords == " ") {
            return arr;
        }
        $.each(options, function(idx, obj) {
            if (obj.name.indexOf(keywords) >= 0) {
                arr.push({
                    name: obj.name
                });
            }
        })
        console.log(arr);
        return arr;
    }

})(window.jQuery)

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.1.4

立即下载

jquery搜索选择



代码描述：搜索选择功能

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

:-O

相关代码

jquery搜索选择

最新