支持目录搜索

src/assets/plugins/jquery.autoMenu.js

@@ -46,7 +46,8 @@
                 var height = typeof opts.height === 'number' && opts.height;
                 var padding = typeof opts.padding === 'number' && opts.padding;
                 that.$element.width(width + padding * 2);
-                var html = '<ul style="height: ' + height + 'px;padding:' + padding + 'px">';
+                var html = `<ul style="height: ${height}px;padding: ${padding}px">
+                <input type="text" placeholder="搜索标题" style="width: ${width}px">`;
                 var num = 0;
                 $('*').each(function() {
                     var _this = $(this);
@@ -105,24 +106,42 @@
             },
             bindEvent: function() {
                 var _this = this;
-                $('#manual').scroll(function() {
+                $('#manual').scroll(function () {
+                    _this.$element.find('input').prop('value', '')
+                    _this.$element.find('li').show()
                     _this.setActive()
-                    var actived = $('#manual .active').get(0)
-                    if(actived) actived.scrollIntoView({ behavior: "smooth", block: "center" });
+                    // scroll
+                    var actived = _this.$element.find('.active')
+                    if (actived.length != 0) {
+                        var top = actived.offset().top
+                        if (top < 0 || top > _this.settings.height) {
+                            actived.get(0).scrollIntoView({ behavior: "smooth", block: "center" });
+                        }
+                    }
                 });
                 _this.$element.off()
                 _this.$element.on('click', '.btn-box', function() {
                     if ($(this).find('span').hasClass('icon-minus-sign')) {
                         $(this).find('span').removeClass('icon-minus-sign').addClass('icon-plus-sign');
                         _this.$element.find('ul').fadeOut();
-                        // $('#manualBody').removeClass('withNaviBar')
                     } else {
                         $(this).find('span').removeClass('icon-plus-sign').addClass('icon-minus-sign');
                         _this.$element.find('ul').fadeIn();
-                        // $('#manualBody').addClass('withNaviBar')
+                        _this.$element.find('input').focus()
                     }
 
                 })
+                // 目录搜索
+                _this.$element.on('input', 'input', function () {
+                    var keyword = $(this).prop('value')
+                    _this.$element.find('li').each(function(){
+                        if ($(this).find('a').text().toUpperCase().includes(keyword.toUpperCase())) {
+                            $(this).show()
+                        } else {
+                            $(this).hide()
+                        }
+                    })
+                })
             }
 
         };
@@ -162,7 +181,7 @@
         levelTwo: 'h2', //二级标题（暂不支持更多级）
         levelThree: 'h3', //二级标题（暂不支持更多级）
         width: 220, //容器宽度
-        height: 480, //容器高度
+        height: 460, //容器高度
         padding: 20, //内部间距
         offTop: 100, //滚动切换导航时离顶部的距离
 

src/assets/styles/jquery.autoMenu.css

@@ -48,7 +48,7 @@ a:focus {
 
 /*-------main---------*/
 
-#manualNavi {
+#manual #manualNavi {
     position: fixed;
     bottom: 0;
     right: 15px;
@@ -56,19 +56,39 @@ a:focus {
     text-align: left;
 }
 
-#manualNavi ul {
+#manual #manualNavi ul {
     line-height: 2;
     overflow-y: auto;
     background: #ffffffe0;
     -webkit-box-shadow: 0 0 10px #CCC;
     -moz-box-shadow: 0 0 10px #CCC;
     box-shadow: 0 0 10px #CCC;
+    margin: 0 0 5px 0;
 }
 
-#manualNavi li {
+#manual #manualNavi input {
+    border-bottom: 1px solid #64c699;
+    outline: none;
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    margin-bottom: 10px !important;
+    font-size: 16px;
+    min-width: unset;
+    box-shadow: none;
+}
+
+#manual #manualNavi li {
     list-style: none;
 }
 
+#manual #manualNavi a {
+    color: #42b983;
+    text-decoration: none;
+    font-weight: normal;
+    user-select: none
+}
+
 #manualNavi ul>li.sub {
     padding-left: 20px;
 }
@@ -81,11 +101,11 @@ a:focus {
     color: #399c9c;
 } */
 
-#manualNavi ul>li.active>a {
+#manual #manualNavi ul>li.active>a {
     color: #ff5370;
 }
 
-.btn-box {
+#manual #manualNavi .btn-box {
     display: inline-block;
     width: 40px;
     height: 40px;
@@ -94,7 +114,7 @@ a:focus {
     position: relative;
 }
 
-.icon-plus-sign {
+#manual #manualNavi .icon-plus-sign {
     display: inline-block;
     width: 26px;
     height: 26px;
@@ -106,8 +126,8 @@ a:focus {
     left: 235px;
 }
 
-.icon-plus-sign:before,
-.icon-plus-sign:after {
+#manual #manualNavi .icon-plus-sign:before,
+#manual #manualNavi .icon-plus-sign:after {
     content: '';
     display: inline-block;
     width: 4px;
@@ -119,11 +139,11 @@ a:focus {
     left: 7px;
 }
 
-.icon-plus-sign:after {
-    -webkit-transform: rotate(90deg);
+#manual #manualNavi .icon-plus-sign:after {
+    transform: rotate(90deg);
 }
 
-.icon-minus-sign {
+#manual #manualNavi .icon-minus-sign {
     display: inline-block;
     width: 26px;
     height: 26px;
@@ -135,7 +155,7 @@ a:focus {
     left: 235px;
 }
 
-.icon-minus-sign:before {
+#manual #manualNavi .icon-minus-sign:before {
     content: '';
     display: inline-block;
     width: 18px;