huxiaoqi567

Kissy自动完成组件AutoComplete（仿淘宝搜索）

效果图：

   
   
   
   
    
    
    
    >  
    
    
    
    <html>  
    
    
    
    <head>  
    
    
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    
    
    
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">  
    
    
    
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">  
    
    
    
    <META HTTP-EQUIV="Expires" CONTENT="0">  
    
    
    
    <title>AutoComplete DEMOtitle>  
    
    
    
    <style type="text/css">  
    
    
    
    /*****************************************************************************/  
    
    
    
    /*                                  reset css                                */  
    
    
    
    /*****************************************************************************/  
    
    
    
    html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td {  
    
    
    
        margin: 0;  
    
    
    
        padding: 0;  
    
    
    
    }  
    
    
    
      
    
    
    
    img,body,html {  
    
    
    
        border: 0;  
    
    
    
    }  
    
    
    
      
    
    
    
    address,caption,cite,code,dfn,em,th,var {  
    
    
    
        font-style: normal;  
    
    
    
        font-weight: normal;  
    
    
    
    }  
    
    
    
      
    
    
    
    ol,ul {  
    
    
    
        list-style: none;  
    
    
    
    }  
    
    
    
      
    
    
    
    caption,th {  
    
    
    
        text-align: left;  
    
    
    
    }  
    
    
    
      
    
    
    
    h1,h2,h3,h4,h5,h6 {  
    
    
    
        font-size: 100%;  
    
    
    
    }  
    
    
    
      
    
    
    
    h1 {  
    
    
    
        font-size: 18px;  
    
    
    
    }  
    
    
    
      
    
    
    
    h2 {  
    
    
    
        font-size: 16px;  
    
    
    
    }  
    
    
    
      
    
    
    
    h3 {  
    
    
    
        font-size: 14px;  
    
    
    
    }  
    
    
    
      
    
    
    
    q:before,q:after {  
    
    
    
        content: '';  
    
    
    
    }  
    
    
    
      
    
    
    
    sup {  
    
    
    
        vertical-align: text-top;  
    
    
    
    }  
    
    
    
      
    
    
    
    sub {  
    
    
    
        vertical-align: text-bottom;  
    
    
    
    }  
    
    
    
      
    
    
    
    input,button,textarea,select {  
    
    
    
        font-family: inherit;  
    
    
    
        font-size: inherit;  
    
    
    
        font-weight: inherit;  
    
    
    
    }  
    
    
    
      
    
    
    
    input,button,textarea,select {  
    
    
    
        *font-size: 100%;  
    
    
    
    }  
    
    
    
      
    
    
    
    select,input,button,textarea {  
    
    
    
        font: 100% tahoma, helvetica, arial, sans-serif;  
    
    
    
    }  
    
    
    
      
    
    
    
    table {  
    
    
    
        font-size: inherit;  
    
    
    
        font: 100%;  
    
    
    
    }  
    
    
    
      
    
    
    
    pre,code,kbd,samp,tt {  
    
    
    
        font-family: 'courier new', courier, monospace;  
    
    
    
    }  
    
    
    
      
    
    
    
    small {  
    
    
    
        font-size: 100%;  
    
    
    
    }  
    
    
    
      
    
    
    
    a {  
    
    
    
        color: #028ef0;  
    
    
    
        text-decoration: none;  
    
    
    
    }  
    
    
    
      
    
    
    
    a:hover {  
    
    
    
        color: #f60;  
    
    
    
        text-decoration: underline;  
    
    
    
    }  
    
    
    
      
    
    
    
    abbr,acronym {  
    
    
    
        border-bottom: 1px dotted;  
    
    
    
        cursor: help;  
    
    
    
    }  
    
    
    
      
    
    
    
    ins {  
    
    
    
        text-decoration: none;  
    
    
    
    }  
    
    
    
      
    
    
    
    del {  
    
    
    
        text-decoration: line-through;  
    
    
    
    }  
    
    
    
      
    
    
    
    hr {  
    
    
    
        color: #d1d7dc;  
    
    
    
        background-color: #d1d7dc;  
    
    
    
        border: none;  
    
    
    
        height: 1px;  
    
    
    
    }  
    
    
    
      
    
    
    
    /* 让浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */  
    
    
    
    html {  
    
    
    
          overflow-y: scroll;  
    
    
    
    }  
    
    
    
      
    
    
    
    body {  
    
    
    
        font: 12px/ 1.5 Tahoma, Arial, '宋体', sans-serif;  
    
    
    
        background-color: #fff;  
    
    
    
    }  
    
    
    
    .clearfix:after {  
    
    
    
          visibility: hidden;  
    
    
    
          display: block;  
    
    
    
          font-size: 0;  
    
    
    
          content: " ";  
    
    
    
          clear: both;  
    
    
    
          height: 0;  
    
    
    
    }  
    
    
    
    .clearfix{  
    
    
    
          *zoom:1;  
    
    
    
    }  
    
    
    
      
    
    
    
    /*****************************************************************************/  
    
    
    
    /*                                 autocompelete css                                */  
    
    
    
    /*****************************************************************************/  
    
    
    
    .k-autocomplete-txt{  
    
    
    
        outline: none;    
    
    
    
        padding: 0px;  
    
    
    
        background: none;  
    
    
    
    }  
    
    
    
    .k-autocomplete-wrapper{  
    
    
    
        position:absolute;  
    
    
    
        z-index: 9999;  
    
    
    
    }  
    
    
    
    .k-autocomplete-wrapper li{  
    
    
    
        padding:0px;  
    
    
    
        margin:0px;  
    
    
    
        display: block;  
    
    
    
        padding:2px 5px;  
    
    
    
        font-size: 12px;  
    
    
    
        height:18px;  
    
    
    
        line-height: 18px;  
    
    
    
        cursor: default;  
    
    
    
    }  
    
    
    
    .k-autocomplete-key{  
    
    
    
          
    
    
    
    }  
    
    
    
    .k-autocomplete-val{  
    
    
    
        display: block;  
    
    
    
        float: right;  
    
    
    
        color:green;  
    
    
    
    }  
    
    
    
    .k-autocomplete-wrapper li.sel{  
    
    
    
        background: #227AFF;  
    
    
    
        color:#fff;  
    
    
    
    }  
    
    
    
    .k-autocomplete-wrapper li.sel .k-autocomplete-val{  
    
    
    
        color:#fff;  
    
    
    
    }  
    
    
    
    .k-autocomplete-tip{  
    
    
    
        position: absolute;  
    
    
    
        z-index: -1;  
    
    
    
        text-indent: 4px;  
    
    
    
        color:#ccc;  
    
    
    
    }  
    
    
    
      
    
    
    
    /*****************************************************************************/  
    
    
    
    /*                                 other css                                */  
    
    
    
    /*****************************************************************************/  
    
    
    
      
    
    
    
    .txt{  
    
    
    
        width:400px;  
    
    
    
        margin-left: 200px;  
    
    
    
        margin-top: 100px;  
    
    
    
        text-indent: 2px;  
    
    
    
        height:20px;  
    
    
    
        border: 1px solid #ccc;  
    
    
    
        line-height: 20px;  
    
    
    
    }  
    
    
    
    .btn{  
    
    
    
        width:100px;  
    
    
    
        height:24px;  
    
    
    
    }  
    
    
    
    style>  
    
    
    
    head>  
    
    
    
    <body>  
    
    
    
    <input type="text"  id="demo" value="" class='txt'/><input type="button"  class='btn' value="搜索"/>  
    
    
    
    <script src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy.js">script>  
    
    
    
    <script type="text/javascript" src='js/kissy-autocomplete.js'>  
    
    
    
    /**  
    
    
    
     * AutoComplete V0.1  
    
    
    
     * @author huxiaoqi  
    
    
    
     */  
    
    
    
    (function(S){  
    
    
    
        var $ = S.all,  
    
    
    
            Event = S.Event,  
    
    
    
            IO = S.IO,  
    
    
    
            UA = S.UA;  
    
    
    
    /**  
    
    
    
     * TODO 定义全局变量  
    
    
    
     * @param $WRAPPER 容器对象  
    
    
    
     * @param PREFIX 组件前缀  
    
    
    
     * @param WRAPPER_CLS Wrapper类名  
    
    
    
     * @param WRAPPER_TPL Wrapper模板  
    
    
    
     * @param TXT_CLS 文本框类名  
    
    
    
     * @param TIP_CLS 提示框类名  
    
    
    
     * @param $TIP_TPL 提示框模板对象  
    
    
    
     * @param CONFIG 默认配置  
    
    
    
     * @param KEY_MAP 按钮配置  
    
    
    
     * @returns AutoComplete  
    
    
    
     */  
    
    
    
        S.add("AutoComplete",function(){  
    
    
    
            var $WRAPPER,PREFIX = "k-autocomplete-",  
    
    
    
                WRAPPER_CLS = PREFIX+"wrapper";  
    
    
    
                WRAPPER_TPL = "+WRAPPER_CLS+">ul>",  
    
    
    
                TXT_CLS = PREFIX+"txt",  
    
    
    
                TIP_CLS = PREFIX+"tip",  
    
    
    
                $TIP_TPL = $("<div class="+TIP_CLS+">div>"),  
    
    
    
                KEY_CLS = PREFIX+"key",  
    
    
    
                VAL_CLS = PREFIX+"val";  
    
    
    
                //定义初始配置  
    
    
    
                CONFIG = {  
    
    
    
                        tip:"input some thing",  
    
    
    
                        url:"",  
    
    
    
                        type:"get",  
    
    
    
                        target:"",  
    
    
    
                        triggerLenth:2,  
    
    
    
                        itemSize:5,  
    
    
    
                        autoSubmit:true  
    
    
    
                },  
    
    
    
      
    
    
    
                //定义按键  
    
    
    
                KEY_MAP = {  
    
    
    
                        ENTER:13,  
    
    
    
                        UP:38,  
    
    
    
                        DOWN:40,  
    
    
    
                        LEFT:37,  
    
    
    
                        RIGHT:39,  
    
    
    
                        BACKSPACE:8,  
    
    
    
                        SPACE:32  
    
    
    
                };  
    
    
    
      
    
    
    
            function AutoComplete(cfg){  
    
    
    
                var self = this;  
    
    
    
                  
    
    
    
                if(!(self instanceof AutoComplete)){    //确保this指向AutoComplete实例  
    
    
    
                    return new AutoComplete();  
    
    
    
                }  
    
    
    
                self.version = "0.1";   
    
    
    
                //配置合并  
    
    
    
                self.config = S.mix(CONFIG,cfg);  
    
    
    
                //获取渲染对象  
    
    
    
                self.target = typeof self.config.target === "string" ? $(self.config.target) : self.config.target;  
    
    
    
                //初始化  
    
    
    
                self._init();  
    
    
    
                //获取wrapper  全局  
    
    
    
                $WRAPPER = self._render();  
    
    
    
                //绑定事件  
    
    
    
                self._bindEvent();  
    
    
    
            }  
    
    
    
            //将属性放入prototype  
    
    
    
            S.augment(AutoComplete,{  
    
    
    
                /**  
    
    
    
                 * TODO 初始化 tip 提示  
    
    
    
                 */  
    
    
    
                _init:function(){     
    
    
    
                        var self = this,  
    
    
    
                        target = self.target,  
    
    
    
                        position = target.offset(),  
    
    
    
                        lineHeight;  
    
    
    
                        target.addClass(TXT_CLS).val("");                     
    
    
    
                        //IE 3px bug  
    
    
    
                        lineHeight = UA.shell === "ie" ?  target.height()+3+"px" : target.height()+"px";  
    
    
    
                        $TIP_TPL.html(self.config.tip)  
    
    
    
                                .css({  
    
    
    
                                        'left':position.left,  
    
    
    
                                        'top':position.top,  
    
    
    
                                        'height':target.height(),  
    
    
    
                                        'width':target.width(),  
    
    
    
                                        'line-height':lineHeight  
    
    
    
                                    })  
    
    
    
                                .insertBefore(target);  
    
    
    
                },  
    
    
    
                /**  
    
    
    
                 * TODO 渲染提示框  
    
    
    
                 * @returns NodeList  
    
    
    
                 */  
    
    
    
                _render:function(){  
    
    
    
                    var self = this,  
    
    
    
                        target = self.target,  
    
    
    
                        position = target.offset();  
    
    
    
                    //将wrapper放入页面  
    
    
    
                    $(WRAPPER_TPL).width(target.width())  
    
    
    
                                  .css({  
    
    
    
                                      "left":position.left,  
    
    
    
                                      "top":position.top+target.height()  
    
    
    
                                   })  
    
    
    
                                   .insertBefore(target);  
    
    
    
                    return $("."+WRAPPER_CLS);  
    
    
    
                },  
    
    
    
                /**  
    
    
    
                 * TODO 绑定事件  
    
    
    
                 * @returns null  
    
    
    
                 */  
    
    
    
                _bindEvent:function(){  
    
    
    
                    var self = this,$curItem,curIndex = -1;  
    
    
    
                    //给文本框绑定事件  
    
    
    
                    Event.on(self.target,"focus blur keyup",function(e){  
    
    
    
                        var eeevtType = e.type,  
    
    
    
                        keyCode = e.keyCode;  
    
    
    
                        self.toggleTipHandler(e);  
    
    
    
                        //触发弹出层事件  
    
    
    
                        Event.fire($WRAPPER,"keyup",e);  
    
    
    
                        if(self.target.val() === "" || evtType === "blur"){  
    
    
    
                            self.clear();  
    
    
    
                        }  
    
    
    
                    });  
    
    
    
                      
    
    
    
                    //绑定弹出层事件  
    
    
    
                    Event.on($WRAPPER,"keyup",function(e){  
    
    
    
                        var eeevtType = e.type,  
    
    
    
                            keyCode = e.keyCode,  
    
    
    
                            eeevtTarget = e.target,  
    
    
    
                            triggerLenth = self.config.triggerLenth;  
    
    
    
                            if(evtType == "keyup" && self.target.val().length >= triggerLenth){                           
    
    
    
                                if(self.isAlphaKey(keyCode) || self.isNumberKey(keyCode) || keyCode == KEY_MAP.BACKSPACE || keyCode == KEY_MAP.SPACE){  
    
    
    
                                    self.autoCompleteHandler(e);                              
    
    
    
                                }else if(self.isDirectionKey(e.keyCode)){  
    
    
    
                                    !self.isNotNull() ? self.autoCompleteHandler(e) : null;  
    
    
    
                                    //判定为方向键  
    
    
    
                                    var $items = $WRAPPER.children(),  
    
    
    
                                          size = $items.length;  
    
    
    
                                    //获取当前选中索引    
    
    
    
                                    curIndex = self.getSelectedItem();    
    
    
    
                                    if(keyCode == KEY_MAP.DOWN){  
    
    
    
                                        curIndexcurIndexcurIndex = curIndex >= size-1 ?0 : curIndex+1;                                
    
    
    
                                    }else if(keyCode == KEY_MAP.UP){  
    
    
    
                                        curIndexcurIndexcurIndex = curIndex <= 0 ? size-1 : curIndex-1;  
    
    
    
                                    }     
    
    
    
                                    $curItem = self.selectItem($items[curIndex]);  
    
    
    
                                    //回车选中当前选项  
    
    
    
                                    $curItem.all('span')[0]?self.target.val($curItem.all('span')[0].innerHTML):self.target.val($curItem.text());                                  
    
    
    
                                }else if(keyCode == KEY_MAP.ENTER && $curItem){  
    
    
    
                                    //清空内容  
    
    
    
                                    self.clear();  
    
    
    
                                }  
    
    
    
                            }  
    
    
    
                    });  
    
    
    
                },  
    
    
    
                /**  
    
    
    
                 * TODO 返回数据后绑定mouseenter mousedown事件  
    
    
    
                 * @returns null  
    
    
    
                 */  
    
    
    
                _bindItemEvent:function(){  
    
    
    
                    var self = this;  
    
    
    
                    return function(){  
    
    
    
                        Event.on($WRAPPER.children(),"mouseenter mousedown",function(e){  
    
    
    
                            var eeevtType = e.type,  
    
    
    
                                eeevtTarget = e.target;  
    
    
    
                            $(evtTarget).addClass('sel').siblings().removeClass('sel');   
    
    
    
                            if(evtType == "mousedown"){  
    
    
    
                                $(evtTarget).all('span')[0]?self.target.val($(evtTarget).all('span')[0].innerHTML):self.target.val($(evtTarget).text());  
    
    
    
                                self.clear();  
    
    
    
                            }  
    
    
    
                        });  
    
    
    
                    };  
    
    
    
                },  
    
    
    
                /**  
    
    
    
                 * TODO 处理提示文本  
    
    
    
                 *      仅通过color属性toggle  
    
    
    
                 * @returns null  
    
    
    
                 */  
    
    
    
                toggleTipHandler:function(e){  
    
    
    
                    var self = this,  
    
    
    
                        target = self.target,  
    
    
    
                        eeevtType = e.type;  
    
    
    
                    if(evtType == "focus"){  
    
    
    
                        $TIP_TPL.css({"color":"#fff"});  
    
    
    
                    }  
    
    
    
                    else if(evtType == "blur" && self.target.val() == ""){  
    
    
    
                        $TIP_TPL.css({"color":"#ccc"});  
    
    
    
                    }  
    
    
    
                },  
    
    
    
                /**  
    
    
    
                 * TODO 处理获取的数据 remote||local  
    
    
    
                 * @returns null  
    
    
    
                 */  
    
    
    
                autoCompleteHandler:function(e){  
    
    
    
                    var self = this,  
    
    
    
                        config = self.config,  
    
    
    
                        data = config.data;  
    
    
    
                        url = config.url,  
    
    
    
                        type = config.type,  
    
    
    
                        itemSize = config.itemSize;  
    
    
    
                    //若url不为空 则默认为 remote数据   否则为local数据  
    
    
    
                    if(url != ""){        
    
    
    
                        IO({  
    
    
    
                            url:url,  
    
    
    
                            type:type,  
    
    
    
                            data:{itemSize:itemSize,queryData:self.target.val()},  
    
    
    
                            success:function(data){  
    
    
    
                                    self.createDom(data,self._bindItemEvent());  
    
    
    
                            }  
    
    
    
                        });  
    
    
    
                    }else{  
    
    
    
                        self.createDom(data,self._bindItemEvent());  
    
    
    
                    }  
    
    
    
                      
    
    
    
                },  
    
    
    
                /**  
    
    
    
                 * TODO 获取自动生成的dom内容  
    
    
    
                 * @param data,callback  
    
    
    
                 * @returns null  
    
    
    
                 */  
    
    
    
                createDom:function(data,callback){  
    
    
    
                    var self = this,  
    
    
    
                    queryTxt = self.target.val(),  
    
    
    
                    html = "";  
    
    
    
                    if(data){  
    
    
    
                        data = typeof data === "string"? eval("("+data+")"):data;  
    
    
    
                        if(queryTxt !="" && data.items){          
    
    
    
                            S.each(data.items,function(item){  
    
    
    
                                    if(typeof item === "object" && item.key && item.val){  
    
    
    
                                        html += "<li><span class="+KEY_CLS+">"+item.key+"span><span class="+VAL_CLS+">"+item.val+"span>li>";  
    
    
    
                                    }else{  
    
    
    
                                        html += "<li>"+item+"li>";  
    
    
    
                                    }     
    
    
    
                            });  
    
    
    
                        }  
    
    
    
                        if(html != ""){  
    
    
    
                            $WRAPPER.html(html).css({"border":"1px solid #ccc","border-top":"none"});  
    
    
    
                            callback();  
    
    
    
                        }else{  
    
    
    
                            this.clear();  
    
    
    
                        }  
    
    
    
                    }     
    
    
    
                },  
    
    
    
                  
    
    
    
                  
    
    
    
                /**  
    
    
    
                 * TODO 方向键控制选中的内容  
    
    
    
                 * @returns Node  
    
    
    
                 */  
    
    
    
                selectItem:function(item){  
    
    
    
                    $(item).addClass('sel').siblings().removeClass('sel');    
    
    
    
                    return $(item);  
    
    
    
                },  
    
    
    
                /**  
    
    
    
                 * TODO 获取当前选中的内容  
    
    
    
                 * @returns int  
    
    
    
                 */  
    
    
    
                getSelectedItem:function(){  
    
    
    
                    var self = this,  
    
    
    
                    $items = $WRAPPER.children(),  
    
    
    
                    index = -1;  
    
    
    
                    S.each($items,function(item,i){  
    
    
    
                        if(item.className == "sel"){  
    
    
    
                            iiindex = i;  
    
    
    
                        }     
    
    
    
                    });  
    
    
    
                    return index;  
    
    
    
                },  
    
    
    
                /**  
    
    
    
                 * TODO 判断是否为方向键  
    
    
    
                 * @param keyCode  
    
    
    
                 * @returns boolean  
    
    
    
                 */  
    
    
    
                isDirectionKey:function(keyCode){  
    
    
    
                    var keyMap = KEY_MAP;  
    
    
    
                    if(keyCode == keyMap.UP || keyCode == keyMap.DOWN || keyCode == keyMap.LEFT || keyCode == keyMap.RIGHT){  
    
    
    
                        return true;  
    
    
    
                    }  
    
    
    
                    return false;  
    
    
    
                },  
    
    
    
                /**  
    
    
    
                 * TODO 判断是否为字母键  
    
    
    
                 * @param keyCode  
    
    
    
                 * @returns boolean  
    
    
    
                 */  
    
    
    
                isAlphaKey:function(keyCode){  
    
    
    
                    return keyCode >= 65 && keyCode <=90 ? true:false;  
    
    
    
                },  
    
    
    
                /**  
    
    
    
                 * TODO 判断是否为数字键  
    
    
    
                 * @param keyCode  
    
    
    
                 * @returns boolean  
    
    
    
                 */  
    
    
    
                isNumberKey:function(keyCode){  
    
    
    
                    return (keyCode >= 48 && keyCode <= 57) ||  (keyCode >= 96 && keyCode <= 105) ? true:false;  
    
    
    
                },  
    
    
    
                clear:function(){  
    
    
    
                    $WRAPPER.html("").css({"border":"none"});  
    
    
    
                },  
    
    
    
                /**  
    
    
    
                 * TODO 判断提示是否为空  
    
    
    
                 * @returns boolean  
    
    
    
                 */  
    
    
    
                isNotNull:function(){  
    
    
    
                    return $WRAPPER.html() != "";  
    
    
    
                }  
    
    
    
            });  
    
    
    
            return AutoComplete;  
    
    
    
        });  
    
    
    
    })(KISSY);  
    
    
    
      
    
    
    
    script>  
    
    
    
    <script type="text/javascript">  
    
    
    
    (function(S){  
    
    
    
        S.use("AutoComplete",function(S,AutoComplete){  
    
    
    
            var auto = new AutoComplete({  
    
    
    
                    tip:"请输入内容",  
    
    
    
                    url:"",  
    
    
    
                    target:"#demo",  
    
    
    
                    triggerLenth:1,  
    
    
    
                    /**  
    
    
    
                     * items 可为 {key:"",val:""}的形式  也可为 string  
    
    
    
                     */  
    
    
    
                    data:{  
    
    
    
                        items:[  
    
    
    
                            {key:"aaaa",val:"约1000条记录"},  
    
    
    
                            {key:'试试看',val:"约50条记录"},  
    
    
    
                            {key:'java',val:"约2000条记录"},  
    
    
    
                            {key:'这个是中文',val:"约1300条记录"},  
    
    
    
                            {key:'javascript',val:"约200条记录"},  
    
    
    
                            {key:'kissy',val:"约11200条记录"},  
    
    
    
                            {key:'jquery',val:"约1000条记录"},  
    
    
    
                            {key:'java开发指南',val:"约1200条记录"},  
    
    
    
                            {key:'java文档',val:"约100条记录"},  
    
    
    
                            {key:'1234',val:"约400条记录"},  
    
    
    
                            "这个是string"  
    
    
    
                        ]}    
    
    
    
                });  
    
    
    
              
    
    
    
        });  
    
    
    
    })(KISSY);  
    
    
    
    script>  
    
    
    
    body>  
    
    
    
    html>

element实现动态路由+面包屑软件技术NINI vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
利用LangChain的StackExchange组件实现智能问答系统 nseejrukjhad langchain microsoft 数据库 python
利用LangChain的StackExchange组件实现智能问答系统引言在当今的软件开发世界中，StackOverflow已经成为程序员解决问题的首选平台之一。而LangChain作为一个强大的AI应用开发框架，提供了StackExchange组件，使我们能够轻松地将StackOverflow的海量知识库集成到我们的应用中。本文将详细介绍如何使用LangChain的StackExchange组件
在一台Ubuntu计算机上构建Hyperledger Fabric网络落叶无声9 区块链超级账本 Hyperledger fabric 区块链 ubuntu 构建 hyperledger fabric
在一台Ubuntu计算机上构建HyperledgerFabric网络Hyperledgerfabric是一个开源的区块链应用程序平台，为开发基于区块链的应用程序提供了一个起点。当我们提到HyperledgerFabric网络时，我们指的是使用HyperledgerFabric的正在运行的系统。即使只使用最少数量的组件，部署Fabric网络也不是一件容易的事。Fabric社区创建了一个名为Cello
ES聚合分析原理与代码实例讲解光剑书架上的书大厂Offer收割机面试题简历程序员读书硅基计算碳基计算认知计算生物计算深度学习神经网络大数据 AIGC AGI LLM Java Python 架构设计 Agent 程序员实现财富自由
ES聚合分析原理与代码实例讲解1.背景介绍1.1问题的由来在大规模数据分析场景中，特别是在使用Elasticsearch（ES）进行数据存储和检索时，聚合分析成为了一个至关重要的功能。聚合分析允许用户对数据集进行细分和分组，以便深入探索数据的结构和模式。这在诸如实时监控、日志分析、业务洞察等领域具有广泛的应用。1.2研究现状目前，ES聚合分析已经成为现代大数据平台的核心组件之一。它支持多种类型的聚
JVM、JRE和 JDK：理解Java开发的三大核心组件 Y雨何时停T Java java
Java是一门跨平台的编程语言，它的成功离不开背后强大的运行环境与开发工具的支持。在Java的生态中，JVM（Java虚拟机）、JRE（Java运行时环境）和JDK（Java开发工具包）是三个至关重要的核心组件。本文将探讨JVM、JDK和JRE的区别，帮助你更好地理解Java的运行机制。1.JVM：Java虚拟机（JavaVirtualMachine）什么是JVM？JVM，即Java虚拟机，是Ja
uniapp map组件自定义markers标记点以对_ uni-app学习记录 uni-app javascript 前端
需求是根据后端返回数据在地图上显示标记点，并且根据数据状态控制标记点颜色，标记点背景通过两张图片实现控制{{item.options.labelName}}exportdefault{data(){return{storeIndex:0,locaInfo:{longitude:120.445172,latitude:36.111387},markers:[//标点列表{id:1,//标记点idin
基于STM32与Qt的自动平衡机器人：从控制到人机交互的的详细设计流程极客小张 stm32 qt 机器人物联网人机交互毕业设计 c语言
一、项目概述目标和用途本项目旨在开发一款基于STM32控制的自动平衡机器人，结合步进电机和陀螺仪传感器，实现对平衡机器人的精确控制。该机器人可以用于教育、科研、娱乐等多个领域，帮助用户了解自动控制、机器人运动学等相关知识。技术栈关键词STM32单片机步进电机陀螺仪传感器AD采集电路Qt人机界面实时数据监控二、系统架构系统架构设计本项目的系统架构设计包括以下主要组件：控制单元:STM32单片机传感器
JAVA·一个简单的登录窗口 MortalTom java 开发语言学习
文章目录概要整体架构流程技术名词解释技术细节资源概要JavaSwing是Java基础类库的一部分，主要用于开发图形用户界面（GUI）程序整体架构流程新建项目，导入sql.jar包（链接放在了文末），编译项目并运行技术名词解释一、特点丰富的组件提供了多种可视化组件，如按钮（JButton）、文本框（JTextField）、标签（JLabel）、下拉列表（JComboBox）等，可以满足不同的界面设计
2019-07-09 AutoCompleteTextView 问题皮皮铭
实现自定义Adapter要实现Filterable接口，不然会报错重写getFilter()方法performFiltering()方法实现过滤数据的操作publishResults()用来接收performFiltering()的返回值，发布。
信息系统安全相关概念(上) YuanDaima2048 课程笔记基础概念安全信息安全笔记
文章总览：YuanDaiMa2048博客文章总览下篇:信息系统安全相关概念(下)信息系统安全相关概念[上]信息系统概述信息系统信息系统架构信息系统发展趋势：信息系统日趋大型化、复杂化信息系统面临的安全威胁信息系统安全架构设计--以云计算为例信息系统安全需求及安全策略自主访问控制策略DAC强制访问控制策略MAC信息系统概述信息系统用于收集、存储和处理数据以及传递信息、知识和数字产品的一组集成组件。几
HarmonyOS开发实战（ Beta5.0）搜索框热搜词自动切换让开，我要吃人了 OpenHarmony HarmonyOS 鸿蒙开发 harmonyos 华为鸿蒙移动开发鸿蒙系统前端开发语言
鸿蒙HarmonyOS开发往期必看：HarmonyOSNEXT应用开发性能实践总结最新版！“非常详细的”鸿蒙HarmonyOSNext应用开发学习路线！（从零基础入门到精通）介绍本示例介绍使用TextInput组件与Swiper组件实现搜索框内热搜词自动切换。效果图预览使用说明页面顶部搜索框内热搜词条自动切换，编辑搜索框时自动隐藏。实现思路使用TextInput实现搜索框TextInput({te
内存保护学习（一）：tc27x的内存保护MPU设置浅析（个人理解）剑从东方起链接文件及功能安全开发语言 c语言
目录一、背景二、Tc27x相关寄存器1、注意点2、注意几个强相关寄存器1）、数据保护范围寄存器2）、代码保护范围寄存器3）、保护集启用寄存器命名约定4）、PSW（每个核都有一个）5）、SYSCON三、使用方法1、内存方面2、在ECUM里面初始化MPU3、OS回调CBK检查4、机理5、补充点一、背景根据低ASIL等级开发的软件组件可能会错误地访问具有较高ASIL等级的软件组件的内存区域，从而产生干扰
详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因 hw_happy 开发语言前端 vue.js javascript
前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
KVM虚拟机源代码分析【转】 xidianjiapei001 #虚拟化技术
1.KVM结构及工作原理1.1KVM结构KVM基本结构有两部分组成。一个是KVMDriver，已经成为Linux内核的一个模块。负责虚拟机的创建，虚拟内存的分配，虚拟CPU寄存器的读写以及虚拟CPU的运行等。另外一个是稍微修改过的Qemu，用于模拟PC硬件的用户空间组件，提供I/O设备模型以及访问外设的途径。KVM基本结构如图1所示。其中KVM加入到标准的Linux内核中，被组织成Linux中标准
Istio pilot-discovery服务发现源码解析（1.13版本） xidianjiapei001 #Istio istio 云原生服务发现
Istiopilot-discovery服务发现介绍工作机制初始化初始化Config控制器初始化Service控制器controller初始化NamespaceServiceNodePodPilotDiscovery各组件启动流程DiscoveryServer接收Envoy的gRPC连接请求流程Config变化后向Envoy推送更新的流程总结参考介绍IstioPilot的代码分为Pilot-Dis
spring security中几大组件的作用和执行顺序阿信在这里 java spring
springsecurity中几大组件的作用和执行顺序在SpringSecurity中，AuthenticationProvider、GroupPermissionEvaluator、PermissionEvaluator、AbstractAuthenticationProcessingFilter、DefaultMethodSecurityExpressionHandler和ManageSecu
Vue3 vant组件库自动导入不叫虎子 Vue vue.js 前端 javascript 前端框架 typescript
实现：完整使用vant组件库文档安装：#Vue3项目，安装最新版Vantnpmivant#通过yarn安装yarnaddvant#通过pnpm安装pnpmaddvant【一】按需引入：https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#fang-fa-er.-an-xu-yin-ru-zu-jian-yang-shi【二】批量引入在基于vit
vant-element-ts一起使用存在的问题 flynn_ 问题总结 vue
由于vant-ui与element-ui部分组件存在冲突，导致在vue-typescript中出现错误:Subsequentpropertydeclarationsmusthavethesametype.Property'$notify'mustbeoftype'ElNotification',butherehastype'Notify'.方案：一个全局导入，一个按需导入,避免冲突的组件同时使用，
【Python】tkinter及组件如何使用小九不懂SAP 我的Python日记 python 开发语言 tkinter
一、tkinter的应用场景tkinter是Python的标准GUI（图形用户界面）库，它提供了丰富的控件和工具，使得开发者能够轻松创建跨平台的桌面应用程序。以下是一些tkinter的常见应用场景：桌面应用程序开发：开发者可以使用tkinter来创建各种桌面应用程序，如文本编辑器、计算器、图片查看器、游戏等。这些应用程序可以具有复杂的用户界面，包括窗口、按钮、文本框、下拉菜单、滚动条等。数据可视化
2024年最全Flutter如何和Native通信-Android视角，Electron开发Android界面 2401_84544531 程序员 android 面试学习
总结【Android详细知识点思维脑图（技能树）】其实Android开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。虽然Android没有前几年火热了，已经过去了会四大组件就能找到高薪职位的时代了。这只能说明Android中级以下的岗位饱和了，现在高级工程师还是比较缺少的，很多高级职位给的薪
【前端】vue 报错:The template root requires exactly one element 程序员-张师傅前端前端 vue.js javascript
【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行
【鸿蒙应用】总结一下ArkUI 读心悦鸿蒙基础鸿蒙应用
ArkUI是HarmonyOS应用界面的UI开发框架，提供了简洁的UI语法、UI组件、动画机制和事件交互等等UI开发基础，以此满足应用开发者对UI界面开发的需求。组件是界面搭建的最小单位，开发者通过多种组件的组合构成完整的界面。页面是ArkUI最小的调度分隔单位，开发者可以将应用设计为多个功能页面，每一个页面进行单独的文件管理，并且通过页面路由API完成页面之间的调度管理，以此来实现应用内功能的解
谈谈你对AQS的理解 Mutig_s juc java 开发语言面试后端
AQS概述AQS，全称为AbstractQueuedSynchronizer，是Java并发包（java.util.concurrent）中一个核心的框架，主要用于构建阻塞式锁和相关的同步器，也是构建锁或者其他同步组件的基础框架。AQS提供了一种基于FIFO（First-In-First-Out）的CLH(三个人名缩写)双向队列的机制，来实现各种同步器，如ReentrantLock、Semapho
PTA_7—3一帮一快中午了算法数据结构 c++
一.题目内容：“一帮一学习小组”是中小学中常见的学习组织方式，老师把学习成绩靠前的学生跟学习成绩靠后的学生排在一组。本题就请你编写程序帮助老师自动完成这个分配工作，即在得到全班学生的排名后，在当前尚未分组的学生中，将名次最靠前的学生与名次最靠后的异性学生分为一组。输入格式：输入第一行给出正偶数N（≤50），即全班学生的人数。此后N行，按照名次从高到低的顺序给出每个学生的性别（0代表女生，1代表男生
Kafka 基础与架构理解 StaticKing KAFKA kafka
目录前言Kafka基础概念消息队列简介：Kafka与传统消息队列（如RabbitMQ、ActiveMQ）的对比Kafka的组件Kafka的工作原理：消息的生产、分发、消费流程Kafka系统架构Kafka的分布式架构设计Leader-Follower机制与数据复制Log-basedStorage和持久化Broker间通信协议Zookeeper在Kafka中的角色总结前言Kafka是一个分布式的消息系
构建常态化安全防线：XDR的态势感知与自动化响应机制安胜ANSCEN 网络安全运维威胁分析自动化响应网络安全常态化安全运营
当前，网络安全威胁日益复杂多变，企业正面临前所未有的严峻挑战。为有效应对这些挑战，态势感知与自动化响应机制在提升网络安全运营效率与防御效果中扮演着至关重要的角色。它们能够实时监测网络状态，智能分析潜在威胁，并在发现异常时立即触发自动化响应流程，从而迅速遏制安全风险，保障企业数字资产的安全。态势感知网络安全的“预警雷达”态势感知，作为网络安全运营的核心组件，犹如一张无形的“预警雷达”，全面监测网络环
机电综合管理系统架构小熊coder 机载系统系统架构
文章目录一、机电综合管理系统架构1.系统概述2.架构层次3.核心组件二、余度管理1.余度概述2.硬件冗余3.软件冗余4.通信冗余三、总线架构1.MIL-STD-1553B总线2.ARINC429总线3.ARINC629总线4.AFDX/ARINC664总线四、未来发展趋势1.分布式架构2.高速网络3.智能化与自动化结语机电综合管理系统（ElectromechanicalManagementSyst
什么是接口测试？做接口测试的意义是什么？白码会说软件测试接口测试软件测试
Timewilltell.1、什么是接口测试？为什么要做接口测试？接口测试是测试系统组件间接口的一种测试。接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点。测试的重点是要检查数据的交换，传递和控制管理过程，以及系统间的相互逻辑依赖关系等。由于如今的系统复杂度不断上升，传统的测试方法成本急剧增加且测试效率大幅下降，所以就要做接口测试。同时，接口测试相对容易实现自动化持续集成，且相
说说在 Vue.js 中如何实现组件间通信 deniro
1用法假设父组件的模板包含子组件，我们可以通过props来正向地把数据从父组件传递给子组件。props可以是字符串数组，也可以是对象。html：js：Vue.component('deniro-component',{props:['message'],template:'{{message}}'});varapp=newVue({el:'#app',data:{}});渲染结果：＂嫦娥四号＂成功
华为USG6000E-S12防火墙Key exchange failed.无法SSH解决方案 redmond88 网络技术 ssh 华为运维
由于目前防火墙算法太新，导致crt和xshell的版本无法登陆，按以下方法解决一、下载华为本地加载除弱安全算法组件包之外的组件包https://download.csdn.net/download/redmond88/89620664?spm=1001.2014.3001.5503二、先改后缀名为.cfg,上传文件到防火墙三、在用户视图下改后缀名为.mod四、move文件到$_install_mo
java观察者模式 3213213333332132 java 设计模式游戏观察者模式
观察者模式——顾名思义，就是一个对象观察另一个对象，当被观察的对象发生变化时，观察者也会跟着变化。在日常中，我们配java环境变量时，设置一个JAVAHOME变量,这就是被观察者，使用了JAVAHOME变量的对象都是观察者，一旦JAVAHOME的路径改动，其他的也会跟着改动。这样的例子很多，我想用小时候玩的老鹰捉小鸡游戏来简单的描绘观察者模式。老鹰会变成观察者，母鸡和小鸡是
TFS RESTful API 模拟上传测试 ronin47
TFS RESTful API 模拟上传测试。　　细节参看这里：https://github.com/alibaba/nginx-tfs/blob/master/TFS_RESTful_API.markdown 模拟POST上传一个图片： curl --data-binary @/opt/tfs.png http
PHP常用设计模式单例, 工厂, 观察者, 责任链, 装饰, 策略,适配,桥接模式 dcj3sjt126com 设计模式 PHP
// 多态, 在JAVA中是这样用的, 其实在PHP当中可以自然消除, 因为参数是动态的, 你传什么过来都可以, 不限制类型, 直接调用类的方法 abstract class Tiger { public abstract function climb(); } class XTiger extends Tiger { public function climb()
hibernate 171815164 Hibernate
main,save Configuration conf =new Configuration().configure(); SessionFactory sf=conf.buildSessionFactory(); Session sess=sf.openSession(); Transaction tx=sess.beginTransaction(); News a=new
Ant实例分析 g21121 ant
下面是一个Ant构建文件的实例，通过这个实例我们可以很清楚的理顺构建一个项目的顺序及依赖关系，从而编写出更加合理的构建文件。下面是build.xml的代码： <?xml version="1
[简单]工作记录_接口返回405原因 53873039oycg 工作
最近调接口时候一直报错，错误信息是: responseCode:405 responseMsg:Method Not Allowed 接口请求方式Post.
关于java.lang.ClassNotFoundException 和 java.lang.NoClassDefFoundError 的区别程序员是怎么炼成的
真正完成类的加载工作是通过调用 defineClass来实现的；而启动类的加载过程是通过调用 loadClass来实现的；就是类加载器分为加载和定义 protected Class<?> findClass(String name) throws ClassNotFoundExcept
JDBC学习笔记-JDBC详细的操作流程 aijuans jdbc
所有的JDBC应用程序都具有下面的基本流程：　　1、加载数据库驱动并建立到数据库的连接。　　2、执行SQL语句。　　3、处理结果。　　4、从数据库断开连接释放资源。下面我们就来仔细看一看每一个步骤：其实按照上面所说每个阶段都可得单独拿出来写成一个独立的类方法文件。共别的应用来调用。 1、加载数据库驱动并建立到数据库的连接： Html代码 St
rome创建rss antonyup_2006 tomcat cms xml struts Opera
引用 1.RSS标准 RSS标准比较混乱，主要有以下3个系列 RSS 0.9x / 2.0 : RSS技术诞生于1999年的网景公司(Netscape)，其发布了一个0.9版本的规范。2001年，RSS技术标准的发展工作被Userland Software公司的戴夫温那(Dave Winer)所接手。陆续发布了0.9x的系列版本。当W3C小组发布RSS 1.0后，Dave W
html表格和表单基础百合不是茶 html 表格表单 meta 锚点
第一次用html来写东西,感觉压力山大,每次看见别人发的都是比较牛逼的再看看自己什么都还不会, html是一种标记语言,其实很简单都是固定的格式 _----------------------------------------表格和表单表格是html的重要组成部分,表格用在body里面的主要用法如下; <table> &
ibatis如何传入完整的sql语句 bijian1013 java sql ibatis
ibatis如何传入完整的sql语句？进一步说，String str ="select * from test_table"，我想把str传入ibatis中执行，是传递整条sql语句。解决办法： <
精通Oracle10编程SQL(14)开发动态SQL bijian1013 oracle 数据库 plsql
/* *开发动态SQL */ --使用EXECUTE IMMEDIATE处理DDL操作 CREATE OR REPLACE PROCEDURE drop_table(table_name varchar2) is sql_statement varchar2(100); begin sql_statement:='DROP TABLE '||table_name;
【Linux命令】Linux工作中常用命令 bit1129 linux命令
不断的总结工作中常用的Linux命令 1.查看端口被哪个进程占用通过这个命令可以得到占用8085端口的进程号，然后通过ps -ef|grep 进程号得到进程的详细信息 netstat -anp | grep 8085 察看进程ID对应的进程占用的端口号 netstat -anp | grep 进程ID &
优秀网站和文档收集白糖_ 网站
集成 Flex, Spring, Hibernate 构建应用程序性能测试工具-JMeter Hmtl5-IOCN网站 Oracle精简版教程网站鸟哥的linux私房菜 Jetty中文文档 50个jquery必备代码片段 swfobject.js检测flash版本号工具
angular.extend boyitech AngularJS angular.extend AngularJS API
angular.extend 复制src对象中的属性去dst对象中. 支持多个src对象. 如果你不想改变一个对象，你可以把dst设为空对象{}: var object = angular.extend({}, object1, object2). 注意: angular.extend不支持递归复制. 使用方法: angular.extend(dst, src); 参数:
java-谷歌面试题-设计方便提取中数的数据结构 bylijinnan java
网上找了一下这道题的解答，但都是提供思路，没有提供具体实现。其中使用大小堆这个思路看似简单，但实现起来要考虑很多。以下分别用排序数组和大小堆来实现。使用大小堆： import java.util.Arrays; public class MedianInHeap { /** * 题目：设计方便提取中数的数据结构 * 设计一个数据结构，其中包含两个函数，1.插
ajaxFileUpload 针对 ie jquery 1.7+不能使用问题修复版本 Chen.H ajaxFileUpload ie6 ie7 ie8 ie9
jQuery.extend({ handleError: function( s, xhr, status, e ) { // If a local callback was specified, fire it if ( s.error ) { s.error.call( s.context || s, xhr, status, e ); }
[机器人制造原则]机器人的电池和存储器必须可以替换 comsci 制造
机器人的身体随时随地可能被外来力量所破坏,但是如果机器人的存储器和电池可以更换,那么这个机器人的思维和记忆力就可以保存下来,即使身体受到伤害,在把存储器取下来安装到一个新的身体上之后,原有的性格和能力都可以继续维持..... 另外,如果一
Oracle Multitable INSERT 的用法 daizj oracle
转载Oracle笔记-Multitable INSERT 的用法 http://blog.chinaunix.net/uid-8504518-id-3310531.html 一、Insert基础用法语法： Insert Into 表名 (字段1,字段2,字段3...） Values (值1,
专访黑客历史学家George Dyson datamachine on
20世纪最具威力的两项发明——核弹和计算机出自同一时代、同一群年青人。可是，与大名鼎鼎的曼哈顿计划（第二次世界大战中美国原子弹研究计划）相比，计算机的起源显得默默无闻。出身计算机世家的历史学家George Dyson在其新书《图灵大教堂》（Turing’s Cathedral）中讲述了阿兰·图灵、约翰·冯·诺依曼等一帮子天才小子创造计算机及预见计算机未来
小学6年级英语单词背诵第一课 dcj3sjt126com english word
always 总是 rice 水稻，米饭 before 在...之前 live 生活，居住 usual 通常的 early 早的 begin 开始 month 月份 year 年 last 最后的 east 东方的 high 高的 far 远的 window 窗户 world 世界 than 比...更
在线IT教育和在线IT高端教育 dcj3sjt126com 教育
codecademy http://www.codecademy.com codeschool https://www.codeschool.com teamtreehouse http://teamtreehouse.com lynda http://www.lynda.com/ Coursera https://www.coursera.
Struts2 xml校验框架所定义的校验文件蕃薯耀 Struts2 xml校验 Struts2 xml校验框架 Struts2校验
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年7月11日 15:54:59 星期六 http://fa
mac下安装rar和unrar命令 hanqunfeng mac
1.下载：http://www.rarlab.com/download.htm 选择 RAR 5.21 for Mac OS X 2.解压下载后的文件 tar -zxvf rarosx-5.2.1.tar 3.cd rar sudo install -c -o $USER unrar /bin #输入当前用户登录密码 sudo install -c -o $USER rar
三种将list转换为map的方法 jackyrong list
在本文中，介绍三种将list转换为map的方法： 1）传统方法假设有某个类如下 class Movie { private Integer rank; private String description; public Movie(Integer rank, String des
年轻程序员需要学习的5大经验 lampcy 工作 PHP 程序员
在过去的7年半时间里，我带过的软件实习生超过一打，也看到过数以百计的学生和毕业生的档案。我发现很多事情他们都需要学习。或许你会说，我说的不就是某种特定的技术、算法、数学，或者其他特定形式的知识吗？没错，这的确是需要学习的，但却并不是最重要的事情。他们需要学习的最重要的东西是“自我规范”。这些规范就是：尽可能地写出最简洁的代码；如果代码后期会因为改动而变得凌乱不堪就得重构；尽量删除没用的代码，并添加
评“女孩遭野蛮引产致终身不育 60万赔偿款1分未得”医腐深入骨髓 nannan408
先来看南方网的一则报道：再正常不过的结婚、生子，对于29岁的郑畅来说，却是一个永远也无法实现的梦想。从2010年到2015年，从24岁到29岁，一张张新旧不一的诊断书记录了她病情的同时，也清晰地记下了她人生的悲哀。　　粗暴手术让人发寒　　2010年7月，在酒店做服务员的郑畅发现自己怀孕了，可男朋友却联系不上。在没有和家人商量的情况下，她决定堕胎。　　12月5日，
使用jQuery为input输入框绑定回车键事件 VS 为a标签绑定click事件 Everyday都不同 jsp input 回车键绑定 click enter
假设如题所示的事件为同一个，必须先把该js函数抽离出来，该函数定义了监听的处理： function search() { //监听函数略...... } 为input框绑定回车事件，当用户在文本框中输入搜索关键字时，按回车键，即可触发search(): //回车绑定 $(".search").keydown(fun
EXT学习记录 tntxia ext
1. 准备（1）官网：http://www.sencha.com/ 里面有源代码和API文档下载。 EXT的域名已经从www.extjs.com改成了www.sencha.com ，但extjs这个域名会自动转到sencha上。（2）帮助文档：想要查看EXT的官方文档的话，可以去这里h
mybatis3的mapper文件报Referenced file contains errors xingguangsixian mybatis
最近使用mybatis.3.1.0时无意中碰到一个问题： The errors below were detected when validating the file "mybatis-3-mapper.dtd" via the file "account-mapper.xml". In most cases these errors can be d

Kissy自动完成组件AutoComplete（仿淘宝搜索）

效果图：

你可能感兴趣的:(组件,autocomplete,自动完成)