- <!--模拟google搜索-->
- <scripttype="text/javascript">
- /********************************可配置选项********************************/
- //被选中的相似关键字背景颜色
- varselectedBgColor="#CCCCCC";
- //未被选中的相似关键字背景颜色
- varunselectedBgColor="#FFFFFF";
- //相似关键字列表框的边框
- varlistBorder="1solid#000000";
- /***************************************************************************/
- /********************************不可配置选项********************************/
- //上一次输入的关键字（用来判断关键字是否有改变，没有则不再去服务端重新获取提示关键字）
- varoldKeyValue;
- //鼠标相对于提示关键字列表框的位置（0：提示框外面，1：提示框里面）
- varmouseLocation=0;
- //当前选中的提示关键字索引（从0开始，等于-1表示没有被选中项）
- varselectedKeyIndex=-1;
- //上一次选中的提示关键字索引（从0开始，等于-1表示没有上次被选中项）
- varoldSelectedKeyIndex=-1;
- //提示关键字总数
- vartdCount=0;
- /***************************************************************************/
- /*
- 用途：给String对象添加去除左右空格方法
- */
- String.prototype.trim=function(){
- varm=this.match(/^\s*(\S+(\s+\S+)*)\s*$/);
- return(m==null)?"":m[1];
- }
- 用途:初始化提示关键字列表框的状态
- functioninitKeyListState(){
- selectedKeyIndex=-1;
- oldSelectedKeyIndex=-1;
- tdCount=0;
- }
- /*
- 用途:将上一次选中的关键字项变为未选中
- */
- functiondisSelectedOldKey(){
- //判断说明：oldSelectedKeyIndex!=selectedKeyIndex
- //当只有一个相似关键字的时候，则不存在上一次选中和这次选中关键字，
- //只要第一次选中后，按向上或向下箭头都是选中。
- if(oldSelectedKeyIndex!=-1&&oldSelectedKeyIndex!=selectedKeyIndex){
- $('keyId'+oldSelectedKeyIndex).bgColor=unselectedBgColor;
- //上一次选中项更新
- oldSelectedKeyIndex=selectedKeyIndex;
- 用途:当按上下箭头时选中新的提示关键字项，按回车时将选中的提示关键字输入到搜索框。
- functionsetSelectedKey(){
- //$('keyId0')存在表示有相关提示关键字，不存在则不处理。
- if($('keyId0')){
- if(event.keyCode==38){
- //------处理向上事件------
- if(selectedKeyIndex==-1){
- selectedKeyIndex=tdCount-1;
- }else{
- selectedKeyIndex=(selectedKeyIndex+tdCount-1)%tdCount;
- $('keyId'+selectedKeyIndex).bgColor=selectedBgColor;
- disSelectedOldKey();
- }elseif(event.keyCode==40){
- //------处理向下事件------
- if(selectedKeyIndex==-1){
- selectedKeyIndex=0;
- }else{
- selectedKeyIndex=(selectedKeyIndex+1)%tdCount;
- $('keyId'+selectedKeyIndex).bgColor=selectedBgColor;
- disSelectedOldKey();
- }elseif(event.keyCode==13){
- //------处理回车事件------
- $('cond').value=$('keyId'+selectedKeyIndex).innerText;
- setCursorLast($('cond'));
- //隐藏提示关键字列表框
- $('dropdownlistDiv').style.display='none';
- 用途:获取相似关键字
- functiongetConformKey(){
- //得到输入的关键字
- varkeyValue=$('cond').value.trim();
- //如果这次的查询关键字和上次的一样，则不去服务器重新获取相似关键字列表。
- if(keyValue!=oldKeyValue){
- //关键字为空则不去服务器获取相似关键字列表
- if(keyValue==''){
- DWRUtil.removeAllRows('showKeyList');
- setDropListVisible(false);
- initKeyListState();
- //采用ajax异步模式获取相似关键字(这里的useraction,改成自己的action)
- useraction.findByLike(keyValue,conformKeyCallback);
- 用途:获取关键字回调方法
- functionconformKeyCallback(keyList){
- initKeyListState();
- if(keyList.length>0){
- //生成相似关键字提示框
- DWRUtil.addRows('showKeyList',keyList,cellFuncs,{
- cellCreator:function(options){
- vartd=document.createElement("td");
- td.id='keyId'+tdCount++;
- td.onmouSEOver=function(){selectedKeyIndex=parseInt(this.id.substring(5,td.id.length));this.bgColor=selectedBgColor;disSelectedOldKey();};
- td.onclick=function(){
- $('cond').value=this.innerText;
- $('cond').focus();
- setCursorLast($('cond'));
- };
- returntd;
- },escapeHtml:false});
- setDropListVisible(true);
- 用途:表格数据显示处理方法
- varcellFuncs=[
- function(data){returndata.username;}
- ];
- 用途:将输入框的光标移到最后
- functionsetCursorLast(inputObj){
- varinputRange=inputObj.createTextRange();
- inputRange.collapse(true);
- inputRange.moveStart('character',inputObj.value.length);
- inputRange.select();
- 用途:创建相似关键字列表框
- functioncreateShowDiv(){
- varshowDiv=document.createElement("div");
- showDiv.id="dropdownlistDiv";
- with(showDiv.style){
- position="absolute";
- //层的绝对位置从这调整
- left=parseInt($('cond').style.left.replace('px',''))+190;
- top=parseInt($('cond').style.top.replace('px',''))+parseInt($('cond').style.height.replace('px',''))+28;
- width=parseInt($('cond').style.width.replace('px',''));
- border=listBorder;
- zIndex="1";
- display='none';
- backgroundColor=unselectedBgColor;
- showDiv.onmouSEOver=function(){mouseLocation=1;};
- showDiv.onmouSEOut=function(){mouseLocation=0;};
- //overflow设置滚动条
- showDiv.innerHTML="<divstyle='width:100%;height:150px;overflow:auto;'><tableborder='0'style='width:100%;height:20%;font-size:12;color:#33CC00;'><tbodyid='showKeyList'style='margin-left:0;margin-right:0;margin-bottom:0;margin-top:0;'></tbody></table></div>";
- document.body.appendChild(showDiv);
- 用途:设置相似关键字列表框是否可见
- 参数：isDisplay，true表示可见，false表示不可见
- functionsetDropListVisible(isDisplay){
- if(mouseLocation==1){
- return;
- if(($('cond').value.trim()!='')&&(isDisplay==true)){
- $('dropdownlistDiv').style.display='';
- else{
- //将创建相似关键字列表框方法附加到onload事件中
- if(window.addEventListener){
- window.addEventListener('load',createShowDiv,false);
- }elseif(window.attachEvent){
- window.attachEvent('onload',createShowDiv);
- </script>
