ajax仿google搜索下拉提示

仿淘宝JSsearch搜索下拉深度用法,jssearch下拉

我们首先给出本次关于JSsearch程序的相关源码:

我们下载JSsearch1.0 Community版本

下载好了之后我们再下载一个类似淘宝的购物页面

然后,我们打开这个页面,会发现是这样的

图片 1

此时我们关掉页面,将我们的JSsearch.js拷贝一份到淘宝页面的根目录的js文件夹下面

拷贝完了之后,我们在html页面中引入它(在body最底部写)

<script src="js/JSsearch.js"></script>
<script>
</script>

然后我们在上面的第76行(input标记下面)里写上这段代码

<div id="search-recommend">
 没有搜索结果
</div>

然后我们打开css/index.css文件,在里面写上这段css样式表

#search-recommend{
  height: 40px;
  width: 580px;
  position: absolute;
  top: 110px;
  border: 1px gray solid;
  padding-left: 20px;
  box-sizing: border-box;
  padding-top: 11px;
  font-size: 15px;
  cursor: pointer;
  background: white;
}

运行一下html页面,发现搜索框下面多出了一个框

图片 2

至此,我们的html和css代码就写完了,接下来,我们来写js代码

我们现在将页面关闭,打开开发工具,在index.html里面找到大约是2754行的<script>标签,那么我们现在就要在里面写入我们的查询代码

首先,我们写入这段代码:(重复获取输入框里面的值)

var lastValue = document.getElementById("search-in").value;
setInterval(function(){   
},10)

然后,我们在var的下面写入判断语句,判断是否输入框的值改变了

if(lastValue != document.getElementById("search-in").value){          
}

接着,我们在if里面写入:

lastValue = document.getElementById("search-in").value;

这段话,就是说重复判断,如果输入框的值改变了,那么就重新赋值

然后,我们再在下面写入:

if(lastValue==null||lastValue==""){
  document.getElementById("search-recommend").innerHTML = "没有搜索结果";
}else{
}

这段话,就是判断如果输入框现在的值为空,那么就让他显示“没有搜索结果”

接着,我们在else里面写入:

var newItemList = JSsearchByKeyWord(itemList,lastValue);
if(newItemList[0] == undefined){
   document.getElementById("search-recommend").innerHTML = "没有搜索结果";
}else{ 
}

这时,我们就调用了JSsearch的用关键词查找的方法,哦,对了,我们还没写itemList这个数组

这时把光标移到setInterval的上面一行,写上:

var itemList = ["光能表","情侣表","日韩腕表","手表放心淘","瑞士表","陶瓷表","电子表","欧米茄","钢带表","皮带表","镂空机械表","斯沃琪","天梭","运动表","卡西欧","国表","时尚表","女表","儿童表","学生表","浪琴"];

itemList是我们所有的商品合集

现在再把光标移回去,移到else里面,写上:

document.getElementById("search-recommend").innerHTML = newItemList[0];

此时,我们再打开html文件,再输入框里面输入内容,就会发现已经有联想了!

图片 3

当然,这还只是个雏形,我们还有一个BUG需要解决,就是当你输入一个多个字符串都含有的字符后,他并不一定推荐你想的那个,这点JSsearch已经帮我们想好了,我在这里就不再写了,如果想解决这个BUG,可以参考JSsearch的说明文档自行解决!

我们首先给出本次关于JSsearch程序的相关源码:
我们下载JSsearch1.0 C…

<script type=”text/javascript” src=”prototype.js”></script>
<script type=”text/javascript”>
//定义变量lastindex 表示为鼠标在查询结果上滑动所在位置,初始为-1
var lastindex=-1;
//定义变量flag 表示是否根据用户输入的关键字进行ajax查询,flase为允许查询 true为禁止查询
var flag=false;
//返回的查询结果生成的数组长度
var listlength=0;
function StringBuffer(){//定义对象StringBuffer
       this.data=[];//创建属性,自定字符串
      } 
StringBuffer.prototype.append=function(){//声明StringBuffer的方法
           this.data.push(arguments[0]);return this;//方法实现代码,赋值
          } 
StringBuffer.prototype.tostring=function(){//返回结果,或是说输出结果
           return this.data.join(“”);
           } 
String.prototype.Trim = function(){//滤过空格
         return this.replace(/(^\s*)|(\s*$)/g, “”);
         }
function hiddensearch(){//隐藏函数 主要是隐藏显示的提示下拉层和iframe,关于iframe下面在说其作用
       $(‘rlist’).style.display=”none”;
       $(‘rFrame’).style.display=”none”;
      }
function showsearch(num){//显示函数 主要是显示的提示下拉层和iframe 参数num,根据该参数控制要显示提示层和iframe的高度
        $(‘rlist’).style.display=”;
        $(‘rFrame’).style.display=”;
       //这里我定义每个返回查询结果的提示高度为20px,其中提示层总高度又加了num,是因为我在定义样式时使用了padding一个像素
        $(‘rlist’).style.height=num*20+num+’px’;
         //同样定位iframe的高度
        $(‘rFrame’).style.height=num*20+num+’px’;
      }
function getposition(element,offset){
      //返回文本输入框的坐标函数,参数element为要返回的对象,参数offset可选为offsetLeft|offsetTop 分别表示为该对象距离左窗口上角的绝对位置
      //利用这个函数可以定位我们要显示的提示层位置,使提示层正确的显示在文本输入框下面
          var c=0;
          while(element){
               c+=element[offset];
               element=element.offsetParent
             }
          return c;
         }
/********************************DOM*************************************************/
function createlist(){//创建提示层
      var listDiv=document.createElement(“div”);//createElement()方法可创建元素节点
      listDiv.id=”rlist”; //提示层id       
      listDiv.style.zIndex=”2″;//z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面,这个设置的是后便
      listDiv.style.position=”absolute”; //position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。这个和下边的那个是对应的,也就是说和下边的框架是对应的,位置设置为 absolute 的元素,可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 “left”、”top”、”right” 以及 “bottom” 属性来规定。下边的出现也是因为选择了这个absolute数值
      listDiv.style.border=”solid 1px #000000″;//设置边框样式
      listDiv.style.backgroundColor=”#FFFFFF”;//设置背景颜色
      listDiv.style.display=”none”; //此元素不会被显示
      listDiv.style.width=$(‘keyword’).clientWidth+”px”;//只读属性,声明了窗口的文档显示区的宽度
      listDiv.style.left=getposition($(‘keyword’),’offsetLeft’)+1.5+”px”;//设置定位元素左外边距
      listDiv.style.top =(getposition($(‘keyword’),’offsetTop’)+$(‘keyword’).clientHeight +3)+”px”;//设置一个定位元素的上外边距边界与其包含块上边界之间的偏移。提示:如果 “position” 属性的值为 “static”,那么设置 “top” 属性不会产生任何效果。
      var listFrame=document.createElement(“iframe”);
      listFrame.id=”rFrame”;//提示层id
      listFrame.style.zIndex=”1″;//z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面,这个设置的是前边
      listFrame.style.position=”absolute”;//和上边的那个设置是对应的
      listFrame.style.border=”0″;//设置边框为0
      listFrame.style.display=”none”; //此元素不会被显示
      listFrame.style.width=$(‘keyword’).clientWidth+”px”;//只读属性,声明了窗口的文档显示区的宽度
      listFrame.style.left=getposition($(‘keyword’),’offsetLeft’)+1+”px”;//设置定位元素左外边距
      listFrame.style.top =(getposition($(‘keyword’),’offsetTop’)+$(‘keyword’).clientHeight +3)+”px”;//设置一个定位元素的上外边距边界与其包含块上边界之间的偏移。提示:如果 “position” 属性的值为 “static”,那么设置 “top” 属性不会产生任何效果。
      document.body.appendChild(listDiv); //向节点的子节点列表的末尾添加新的子节点。开头结尾相呼应。
      document.body.appendChild(listFrame);//向节点的子节点列表的末尾添加新的子节点。开头结尾相呼应 。
     }
function setstyle(element,classname){
  switch (classname){
        case ‘m’:
          element.style.fontSize=”12px”;//设置字体大小
          element.style.fontFamily=”arial,sans-serif”;//fontFamily 属性定义用于元素文本显示的字体。
          element.style.backgroundColor=”#3366cc”;//背景
          element.style.color=”black”;//颜色
          element.style.width=$(‘keyword’).clientWidth-2+”px”;//设置只读属性的宽
          element.style.height=”20px”;//设置高度
          element.style.padding=”1px 0px 0px 2px”;//padding 属性设置元素的内边距。
          if(element.displaySpan)element.displaySpan.style.color=”white”
          break;
        case ‘d’:
          element.style.fontSize=”12px”;
          element.style.fontFamily=”arial,sans-serif”;
          element.style.backgroundColor=”white”;
          element.style.color=”black”;
          element.style.width=$(‘keyword’).clientWidth-2+”px”;
          element.style.height=”20px”;
          element.style.padding=”1px 0px 0px 2px”;
          if(element.displaySpan)element.displaySpan.style.color=”green”
          break;
        case ‘t’:
          element.style.width=”80%”;
          if(window.navigator.userAgent.toLowerCase().indexOf(“firefox”)!=-1)element.style.cssFloat=”left”;//判断头的
          else element.style.styleFloat=”left”;
          element.style.whiteSpace=”nowrap”;
          element.style.overflow=”hidden”;
          element.style.textOverflow=”ellipsis”;
          element.style.fontSize=”12px”;
          element.style.textAlign=”left”;
          break;
        case ‘h’:
          element.style.width=”20%”;
          if(window.navigator.userAgent.toLowerCase().indexOf(“firefox”)!=-1)element.style.cssFloat=”right”;
          else element.style.styleFloat=”right”;
          element.style.textAlign=”right”;
          element.style.color=”green”;
          break;
       }
     }
function focusitem(index){
       if($(‘item’+lastindex)!=null)setstyle($(‘item’+lastindex),’d’);
       if($(‘item’+index)!=null){
                setstyle($(‘item’+index), ‘m’);
                lastindex=index;
              }
       else {
         $(“keyword”).focus();
        }
      }
function searchclick(index){
         $(“keyword”).value=$(‘title’+index).innerHTML;
         flag=true;
       }
function searchkeydown(e){
       if($(‘rlist’).innerHTML==”)return;
        var keycode=(window.navigator.appName==”Microsoft Internet Explorer”)?event.keyCode:e.which;
  //down
  if(keycode==40)
  {
if(lastindex==-1||lastindex==listlength-1)
{
  focusitem(0);
  searchclick(0);
}
else{
  focusitem(lastindex+1);
  searchclick(lastindex+1);
}
  }
if(keycode==38)
{
if(lastindex==-1)
{
  focusitem(0);
  searchclick(0);
}
else{
  focusitem(lastindex-1);
  searchclick(lastindex-1);
}
}
if(keycode==13)
{
  focusitem(lastindex);
  $(“keyword”).value=$(‘title’+lastindex).innerText;
}    
if(keycode==46||keycode==8){flag=false;ajaxsearch($F(‘keyword’).substring(0,$F(‘keyword’).length-1).Trim());}
}
function showresult(xmlhttp)
{
var result=unescape(xmlhttp.responseText);
if(result!=”){
    var resultstring=new StringBuffer();
       var title=result.split(‘$’)[0];
       var hits=result.split(‘$’)[1];
    for(var i=0;i<title.split(‘|’).length;i++)
    {
    resultstring.append(‘<div id=”item’+i+'”>’);
    resultstring.append(‘<span id=title’+i+’>’);
    resultstring.append(title.split(‘|’)[i]);
    resultstring.append(‘</span>’);
    resultstring.append(‘<span id=hits’+i+’>’);
    resultstring.append(hits.split(‘|’)[i]);
    resultstring.append(‘</span>’);
    resultstring.append(‘</div>’);
    }
    $(‘rlist’).innerHTML=resultstring.tostring();
    for(var j=0;j<title.split(‘|’).length;j++)
    {
     setstyle($(‘item’+j),’d’);
  $(‘item’+j).displaySpan=$(‘hits’+j);
     setstyle($(‘title’+j),’t’);
     setstyle($(‘hits’+j),’h’);
    }
    showsearch(title.split(‘|’).length);
    listlength=title.split(‘|’).length;
    lastindex=-1;
}
else hiddensearch();
}
function ajaxsearch(value)
{
new Ajax.Request(‘search.php’,{method:”get”,parameters:”action=do&keyword=”+escape(value),onComplete:showresult});
}
function main()
{
$(‘keyword’).className=$(‘keyword’).className==’inputblue’?’inputfocus’:’inputblue’;
if($F(‘keyword’).Trim()==”)hiddensearch();
else
{
      if($F(‘keyword’)!=”&&flag==false)ajaxsearch($F(‘keyword’).Trim());
   if(listlength!=0)$(‘keyword’).onkeydown=searchkeydown;
   else hiddensearch();
}
}
function oninit()
{
$(‘keyword’).autocomplete=”off”;
$(‘keyword’).onfocus=main;
$(‘keyword’).onkeyup=main;
$(‘keyword’).onblur=hiddensearch; 
createlist();
}
Event.observe(window,’load’,oninit);
</script>

相关文章