Forráskód Böngészése

feat: 首页企业搜索增加联想

cuiyalong 4 éve
szülő
commit
44095d0e56

+ 105 - 0
src/web/staticres/js/index_content.js

@@ -121,3 +121,108 @@ $("#index .ser").bind("input propertychange",function(){
       judgeTop();
   });
 })();
+
+var entAssoc = {
+    list: [],
+    preSearch: {
+        hover: false,
+        focus: false
+    },
+    init: function () {
+        this.initDOMEvents()
+    },
+    initDOMEvents: function () {
+        var _this = this
+        $('#keywords').on('input', this.debounce(function () {
+            var isEntSearch = $('.search .tips .active').text().indexOf('企业搜索') !== -1
+            if (isEntSearch) {
+                _this.getAssocList()
+                _this.checkListShow()
+            }
+        }, 300))
+        $('.pre-search-list').on('click', '.pre-search-item', function () {
+            var id = $(this).attr('data-id')
+            window.open('/swordfish/page_big_pc/svip/ent_ser_portrait/' + id)
+        })
+        // 控制list显示隐藏
+        $('#keywords').on('focus', function () {
+            _this.preSearch.focus = true
+            _this.checkListShow()
+        }).on('blur', function () {
+            _this.preSearch.focus = false
+            _this.checkListShow()
+        })
+        $('.pre-search-list').on('mouseout', function () {
+            _this.preSearch.hover = false
+            _this.checkListShow()
+        }).on('mouseover', function () {
+            _this.preSearch.hover = true
+            _this.checkListShow()
+        })
+    },
+    checkListShow: function () {
+        var show = $('#keywords').val().length >= 2 && this.list.length && (this.preSearch.focus || this.preSearch.hover)
+        this.listShow(show)
+    },
+    getAssocList: function () {
+        var _this = this
+        var data = {
+            name: $('#keywords').val()
+        }
+        if (data.name.length < 2) return
+        $.ajax({
+            url: '/bigmember/search/ent/association',
+            method: 'POST',
+            data: data,
+            success: function (res) {
+                if (res.error_code === 0) {
+                    if (res.data) {
+                        _this.list = res.data.list || []
+                        if (_this.list.length) {
+                            _this.render()
+                            _this.checkListShow()
+                        }
+                    }
+                }
+            }
+        })
+    },
+    render: function () {
+        var container = $('.pre-search-list')
+        var html = ''
+        this.list.forEach(function (item) {
+            html += ('<div class="pre-search-item ellipsis" data-id='+ item.entId +'>' + item.name + '</div>')
+        })
+        container.html(html)
+    },
+    listShow: function (f) {
+        if (f) {
+            $('.pre-search-list').show()
+        } else {
+            $('.pre-search-list').hide()
+        }
+    },
+    debounce: function (func, delay, immediate){
+        var timer = null;
+        delay = delay || 200
+        return function() {
+            var context = this;
+            var args = arguments;
+            if(timer) clearTimeout(timer);
+            if(immediate){
+                var doNow = !timer;
+                timer = setTimeout(function(){
+                    timer = null;
+                },delay);
+                if(doNow){
+                    func.apply(context,args);
+                }
+            }else{
+                timer = setTimeout(function(){
+                    func.apply(context,args);
+                },delay);
+            }
+        }
+    }
+}
+entAssoc.init()

+ 29 - 0
src/web/staticres/pccss/index.css

@@ -1146,3 +1146,32 @@ body{
   /*color: #0a74bf;*/
   /*font-weight: bolder;*/
 /*}*/
+
+.pre-search-list {
+    position: absolute;
+    padding: 20px 0;
+    z-index: 6;
+    top: 90px;
+    left: 50%;
+    width: 620px;
+    background: #fff;
+    box-shadow: 0 0 20px rgb(0,0,0,0.1);
+    border-radius: 8px;
+    overflow: hidden;
+    transform: translateX(-50%);
+}
+.pre-search-item {
+    padding: 12px 40px;
+    width: 100%;
+    font-size: 16px;
+    line-height: 24px;
+    color: #686868;
+    box-sizing: border-box;
+    transition: all .3s;
+    cursor: pointer;
+}
+.pre-search-item:hover {
+    padding: 12px 30px;
+    color: #1d1d1d;
+    background-color: #ececec;
+}

+ 3 - 2
src/web/templates/pc/index.html

@@ -121,7 +121,7 @@
 			<h3 class="title">全国招标信息免费看,不遮挡</h3>
 			<div class="search">
 				<form method="post" action="/jylab/supsearch/index.html" id="zbIndex">
-					<input class="ser" autocomplete="off"  type="text"  name="keywords" placeholder="请输入您想要查询的招标信息" id="keywords" value="" />
+					<input class="ser" autocomplete="off"  type="text" name="keywords" placeholder="请输入您想要查询的招标信息" id="keywords" value="" />
 					<input type="hidden" name="searchvalue">
 					<input class="btn" type="button" onclick="zbSeatch('zbIndex')" />
 				</form>
@@ -134,7 +134,8 @@
           <span>企业搜索</span>
           <i></i>
         </div>
-			</div>
+        <div class="pre-search-list" style="display: none;"></div>
+		</div>
 
       <div class="projectList CfadeInUp">
         <ul>