ZYjames12345
/
zhujian_OA


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
							<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        .input-search {
            position: relative;
            margin: 100px auto;
            width: 200px;
        }

        input {
            width: 200px;
            height: 30px;
            padding-left: 10px;
            padding-right: 10px;
            background-color: #ffffff;
            border: solid 1px #e5e5e5;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            outline: none;
            -webkit-appearance: none;
            appearance: none;
        }

        ul {
            display: none;
            position: absolute;
            top: 29px;
            width: 100%;
            border: solid 1px #62a6da;
            max-height: 340px;
            overflow-y: auto;
            z-index: 1;
            font-size: 0;
        }

            ul li {
                position: relative;
                padding-left: 10px;
                width: 100%;
                height: 34px;
                line-height: 34px;
                font-size: 14px;
                color: #454545;
                text-align: left;
                background-color: #fff;
                cursor: pointer;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

                ul li:hover {
                    color: #fff;
                    background-color: #1c9dff;
                }
    </style>

</head>
<body>
    <div class="input-search">
        <input type="text" placeholder="请输入课程名称">
        <ul></ul>
    </div>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.8.2.min.js"></script>
    <script>
        $(function () {
            /**按下键盘时搜索*/
            $("body").undelegate("input", "keyup").delegate("input", "keyup", function () {
                var name = $(this).val().replace(/\s+/g, "");
                if (name.length > 0) {
                    var resultArray = getArrayByName(name, jsonArr, 6);
                    if (resultArray.length < 1) {
                        $(this).next("ul").hide();
                    } else {
                        var html = "";
                        for (var i = 0; i < resultArray.length; i++) {
                            html += "<li>" + resultArray[i].name + "</li>";
                        }
                        $(this).next("ul").html(html).show();
                    }
                }
            })
            /**下拉列表展开时点击li的事件,为输入框赋值*/
            $(".input-search").on("click", "ul li", function () {
                $(this).parent("ul").siblings("input").val($(this).text());
                $(this).parent("ul").hide();
            });
        })

        var jsonArr = [
            {
                "name": "计算机组成原理"
            },
            {
                "name": "计算机网络"
            },
            {
                "name": "数据结构"
            },
            {
                "name": "网页程序设计"
            },
            {
                "name": "嵌入式开发"
            },
            {
                "name": "高等数学"
            },
            {
                "name": "计算机应用技术"
            },
            {
                "name": "计算机科学与技术"
            }
        ]
        /**
         * 根据字符串模糊搜索返回符合条件的数据
         * name   搜索字符串
         * array  检索json数组
         * length 匹配结果最大长度
         */
        function getArrayByName(name, array, length) {
            if (array.length < 1) {
                return;
            }
            var result = [];
            for (var key in array) {
                if (checkStrContain(array[key].name, name) && result.length < length) {
                    result.push(array[key])
                }
            }
            return result
        }
        /**检查一个字符串是否包含在另一个字符串里,并且首字符相同
         * i:计算机科学与技术
         * j:计科
         * 返回true
         * */
        function checkStrContain(i, j) {
            if (!i || !j) {
                return false;
            }
            if (i.charAt(0) != j.charAt(0)) {
                return false;
            }
            i = i.substr(1, i.length - 1);
            j = j.substr(1, j.length - 1);
            var a;
            var b;
            if (i.length > j.length) {
                a = i;
                b = j;
            } else {
                a = j;
                b = i;
            }
            var count = 0;
            for (var bi = 0; bi < b.length; bi++) {
                var bArr = b.split("");
                if (a.indexOf(bArr[bi]) != -1) {
                    count++;
                } else {
                    break;
                }
            }
            if (b.length == count) {
                return true;
            } else {
                return false;
            }
        }
    </script>

</body>
</html>