点击搜索，会显示关键字取消按钮，输入文字，会在搜索框下，有相应的列表显示。

HTML:

            
             
             
             
             
             
             
             
             
             
             
                        ai            
             
     
            
      
                
       
                    
        
                        
                                 
         
                            
          
 
           
 
             
             
             
           
 
             搜索  
          
                            
          取消                        
         
                        
         
                            
          
 
           
 
            
实时搜索文本
 
           
 
          
                            
          
 
           
 
            
实时搜索文本
 
           
 
          
                            
          
 
           
 
            
实时搜索文本
 
           
 
          
                            
          
 
           
 
            
实时搜索文本
 
           
 
          
                        
         
                    
        
                
       
            
      
        
     
        
                                 

所有的css都使用weui的样式。

JS:

$(function(){        var $searchBar = $('#searchBar'),            $searchResult = $('#searchResult'),            $searchText = $('#searchText'),            $searchInput = $('#searchInput'),            $searchClear = $('#searchClear'),            $searchCancel = $('#searchCancel');        function hideSearchResult(){            $searchResult.hide();            $searchInput.val('');        }        function cancelSearch(){            hideSearchResult();            $searchBar.removeClass('weui-search-bar_focusing');            $searchText.show();        }        $searchText.on('click', function(){            $searchBar.addClass('weui-search-bar_focusing');            $searchInput.focus();        });        $searchInput            .on('blur', function () {                if(!this.value.length) cancelSearch();            })            .on('input', function(){                if(this.value.length) {                    $searchResult.show();                } else {                    $searchResult.hide();                }            })        ;        $searchClear.on('click', function(){            hideSearchResult();            $searchInput.focus();        });        $searchCancel.on('click', function(){            cancelSearch();            $searchInput.blur();        });    });