ext 类似百度、google搜索自动提示

在组件上面用keyup事件来监听

<ext:panel width="210" layout="form" listeners="{afterlayout:onUIShow}" style="margin-left:10px">
                                        <ext:items>
                                            <ext:textField id="query_title333" var="query_title333" fieldLabel="${app:i18n('knowledge.document.search')}"
                                                width="125" listeners="{specialkey:doFileQuery,keyup:inputSuggest}" enableKeyEvents="true" />
                                        </ext:items>
                                    </ext:panel>

js代码

--回车查询

 function doFileQuery(o,e){
           if(e.getKey()==13){
                 onFileSearch();
            }
        }

--搜索提示核心代码

 function inputSuggest() {

       var txtValue = query_title333.getValue();
       var str = "";
       Ext.Ajax.request({
            params: {txtValue:encodeURI(txtValue)},
            url: "../kbssuggest/findSuggestByValue.action",
            success:function(response) {
                var resp=Ext.util.JSON.decode(response.responseText); 
                if(resp.suggestReslut!="")
                str = resp.suggestReslut.split("#");
                createDiv(str);
            }
        }); 
   }
  
      function onmouseOver1(div) {
         div.style.background="#99BBE8";
         div.style.color="white";
      }
      function onmousetOut1(div) {
        div.style.background="#F2F4F4";
        div.style.color="black";
      }
      function setSuggestValue(value) {
         query_title333.setValue(value);
      }
      function createDiv(str){
          var pop=window.createPopup();
          var len=0;
          if(null!=str&&''!=str){
            len=str.length;
          }
          //设置弹出菜单的内容"+id+"
          //var menuDiv = '<table width="100%" height="100%" cellspacing="0" cellpadding="0" style="border: 1px solid #4482D3; background: #F2F4F4;font-size: 9pt;">';
         var menuDiv='<div class="FONT-SIZE:11pt;font-style: 黑体;font-weight: bold;COLOR:#000000;BACKGROUND-REPEAT:repeat;BACKGROUND-ATTACHMENT:scroll;width:30%;position: absolute;overflow:hidden;z-index: 1000;"><iframe  style="position:absolute;z-index:-1;width:100%;height:100%;background-color:green;top:0;left:0;scrolling:no;" frameborder="0" src="about:blank" mce_src="about:blank"></iframe>';
          for(i=0; i < len - 1; i++) {
             //menuDiv +='<tr><td style="cursor:hand; height: 16px;padding: 2px;padding-left:5px;" align="left" οnclick="parent.setSuggestValue(this);" >'
                   menuDiv += '<div οnmοuseοver="parent.onmouseOver1(this);" ';
                   menuDiv += 'οnmοuseοut="parent.onmousetOut1(this);" ';
                   menuDiv += 'οnclick="parent.setSuggestValue(this.innerHTML);" ';
                   menuDiv += 'style="background-color: #FFFFFF;padding: 2px 6px 2px 6px;">' + str[i] + '</div>';
                    //menuDiv +=str[i] +'</td></tr>';
                }
              menuDiv+='</div>';  
             // menuDiv += '</table>';
          pop.document.body.innerHTML =menuDiv;
           //选择右键菜单的一项后，菜单隐藏
           pop.document.οnclick=function(){
                 pop.hide();
           }
           //得到当前坐标
           var e=document.getElementById('query_title333');
           var t=e.offsetTop;
           var l=e.offsetLeft;
           while(e=e.offsetParent)
            { 
                 t+=e.offsetTop; 
                 l+=e.offsetLeft; 
            } 
           //调整弹出窗口的高度
           var high=len*15;
           if(len>4&&len<=7){
             high=len*18;
           }else if(len>7){
             high=len*20;
           }
           pop.show(l+56,t*2.7,130,high,document.body);
      }