zoukankan      html  css  js  c++  java
  • 搜索热词 搜索联想词

    /*
        so.js
        HEAD 搜索框js所有逻辑都放在这里
        by sunhw 2014-9-22
    */
    T.dom.ready(function(){
        //搜索下拉联想词
        F.load('widget.autocomplete.autoComplete', function(){
            var mask = T.get('so-mask');
            if(!mask) return;
            this.show({
                renderTo : 'soAutoWord',
                renderContentTo : 'soAutoWrap',
                padding : 1,
                listener : 'so',
                proxy : F.config.q + '/api/search_hint',
                proxyType : function(){
                    return document.all ? 'jsonp' : 'ajax';
                },
                filter : 'key',
                lineHeight : 32,
                proxyDelay : 500,
                render : function(value, index){
                    return value;
                },
                handler : function(data, index){
                    index = parseInt(index, 10);
                    this.options.listener.value = data[index];
                    document.forms.msearch.submit();
                },
                change : function(data, index){
                    index = parseInt(index, 10);
                    var value = data[index];
                    this.options.listener.value = value;
                },
                show : function(data){
                    if(!data.length){
                        return false;
                    }
                    T.setStyle(mask, 'height', this.options.renderContentTo.offsetHeight);
                    T.show(mask);
                },
                close : function(){
                    T.hide(mask);
                    T.setStyle(mask, 'height', 0);
                },
                display : function(){
                    T.setStyle(mask, 'height', this.options.renderContentTo.offsetHeight);
                    T.show(mask);
                }
            });
        });
        //搜索热词
        (function(){
            var so = T.get('so'),
                soUnit = T.get('soUnit'),
                soHotWord = T.get('soHotWord'),
                soAutoWord = T.get('soAutoWord');
            if(!so || !soUnit) return;
            var timer = 0, ttl = 200;
            var val = T.trim(so.value), soWord = null;
            var onFocus = function(){
                clearTime();
                if(T.trim(so.value) == val){
                    so.value = '';
                }
                T.addClass(soUnit, 'show-panel');
                onKeyup();
            };
            var onBlur = function(){
                clearTime();
                timer = setTimeout(function(){
                    if(T.trim(so.value).length === 0){
                        so.value = val;
                    }
                    T.removeClass(soUnit, 'show-panel');
                }, ttl);
            };
            var onKeyup = function(e){
                if(so.value && T.dom.hasClass(soUnit, 'show-panel')){
                    T.hide(soHotWord);
                    T.show(soAutoWord);
                }else{
                    T.hide(soAutoWord);
                    T.show(soHotWord);
                }
            };
            var onSubmit = function(e){
                e= T.event.get(e);
                var value = T.trim(so.value);
                if(!value || value =='') {
                    T.event.stop(e);
                    return false;
                };
            };
            var clearTime = function(){
                clearTimeout(timer);
            };
            soWord = T.getAttr(so,'soword');
            if(soWord){
                so.value = decodeURIComponent(soWord);
            }
            T.on(so, 'focus', onFocus);
            T.on(so, 'blur', onBlur);
            T.on(so, 'keyup', onKeyup);
            T.on(document.forms['msearch'], 'submit', onSubmit);
        })();
    });

  • 相关阅读:
    内置系统账户:Local system/Network service/Local Service 区别
    python-基于文件导入的特性的单例模式
    php原因 nginx报错[error] 10773#0: *272212065 recv() failed (104: Connection reset by peer) while reading response header from upstream
    实用Django ORM实用操作方法
    session是什么和cookie的区别?
    Python可迭代对象,迭代器,生成器
    浅析python中的GIL锁和协程
    git 常用
    testlink安装
    redmine搭建
  • 原文地址:https://www.cnblogs.com/sunhw360/p/4139577.html
Copyright © 2011-2022 走看看