模糊搜索框

　　一直以来对搜索框的模糊搜索很感兴趣,强行学习一波。在了解了ajax之后,借助fiddler总算搞定。

　　实现思路:本来要使用完整的效果得从后端返回结果,但惊奇的发现可以借助接口返回的结果完成就开心的借用了。

　　步骤:

　　1.结构

　　

<div class="bg-div">
   <div class="search_box">
       <div class="logo"></div>
       <form id="search_form" action="https://cn.bing.com/search" target="_blank">
           <input type="text" class="input_text" id="search_input" />
           <input type="submit" class="input_submit" value="" />
       </form>
   </div>
   <div class="suggest" id="search-suggest">
       <ul id="search-result">
       </ul>
   </div>
</div>

 

      2.样式

 *{
	 margin: 0;
	 padding: 0;
 }
 body{
	background-color: #333;
 }
 .bg-div{
	background-image: url(river.jpg);
	width: 1228px;
	height: 690px;
	margin: 0 auto;
	position: relative;
 }
 .logo{
	 background-image: url(logo.png);
	 width: 107px;
	 height: 53px;
	 float: left;
	 margin: -4px 18px 0 0;
 }
 form{
	 float: left;
	 background: #fff;
	 padding: 5px;
 }
 .input_text{
	 width: 350px;
	 outline: none;
	 height: 25px;
	 line-height: 25px;
	 float: left;
	 border: 0;
	 position: relative;
 }
 .input_submit{
	width: 29px;
	height: 29px;
	background-image: url(search-button.png);
	border: 0;
	float: left;
 }
 .search_box{
	position: absolute;
	left: 300px;
	top: 200px;
 }
 .suggest{
	width: 388px;
	background-color: #fff;
	border: 1px solid #999;
	position: absolute;
 }
 .suggest ul{
	list-style: none;
 }
 .suggest ul li{
	padding: 3px;
	font-size: 14px;
	line-height: 25px;
	cursor: pointer;
}
.suggest ul li:hover{
	text-decoration: underline;
	background: #e5e5e5;
}

 在js方面由于要通过ajax调用http://api.bing.com/qsonhs.aspx和http://cn.bing.com/search会受到同源策略的影响就用fiddler代理即用本地文件代替远程文件

 js完成

<script>
var getDOM = function(id){
	 	return document.getElementById(id);
	 }
	 //使用此类绑定可以对一个dom元素绑定多个事件,onclick之类的只能绑定一个事件，若重复绑定后面的事件会覆盖前面的
	 var addEvent = function(id,event,fn){
	 	var el = getDOM(id)||document;
	 	if(el.addEventListener){	//非IE
	 		el.addEventListener(event,fn,false);
	 	}else if(el.attachEvent){	//IE
	 		el.attachEvent('on'+event,fn);
	 	}
	 }

	 var getElementLeft = function(element){
	 	var actualLeft = element.offsetLeft;
	 	var current = element.offsetParent;

	 	while(current !== null){
	 		actualLeft += current.offsetLeft;
	 		current = current.offsetParent;
	 	}
	 	return actualLeft;
	 }

	 var getElementTop = function(element){
	 	var actualTop = element.offsetTop;
	 	var current = element.offsetParent;

	 	while(current !== null){
	 		actualTop += current.offsetTop;
	 		current = current.offsetParent;
	 	}
	 	return actualTop;
	 }

	 var ajaxGet = function(url,callback){
	 	var _xhr = null;
	 	if(window.XMLHttpRequest){
	 		_xhr = new window.XMLHttpRequest();
	 	}else if(window.ActiveObject){
	 		_xhr = new ActiveObject('Msxml2.XMLHTTP');
	 	}
	 	_xhr.onreadystatechange = function(){
	 		if(_xhr.readyState == 4 && _xhr.status == 200){
	 			callback(JSON.parse(_xhr.responseText));
	 		}
	 	}
	 	_xhr.open('get',url,false);
	 	_xhr.send(null);
	 }

	 var delegateEvent = function(target,event,fn){
	 	addEvent(document,event,function(e){
	 		if(e.target.nodeName == target.toUpperCase()){
	 			fn.call(e.target);
	 		}
	 	})
	 }

	 addEvent('search_input','keyup',function(){
	 	var searchText = getDOM('search_input').value;
	 	ajaxGet('http://api.bing.com/qsonhs.aspx?q='+searchText,function(d){
	 		var d = d.AS.Results[0].Suggests;
	 		var html = '';
	 		for(var i=0;i<d.length;i++){
	 			html += '<li>'+d[i].Txt+'</li>';
	 		}
	 		var _dom = getDOM('search-suggest');
	 		getDOM('search-result').innerHTML = html;
	 		_dom.style.top = getElementTop(getDOM('search_form'))+38+'px';
		 	_dom.style.left = getElementLeft(getDOM('search_form'))+'px';
		 	_dom.style.position = 'absolute';
		 	_dom.style.display = 'block';
	 	})
	 })
　　　　　//点击输入框以外的部分显示的结果隐藏
	 document.onclick = function(){
	 	getDOM('search-suggest').style.display = 'none';
	 }
　　　　　//为动态生成的li绑定事件
	 delegateEvent('li','click',function(){
	 	var keyword = this.innerHTML;
	 	location.href = 'http://cn.bing.com/search?q='+keyword;
	 })
</script>

 jquery完成

<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script>
	$('#search_input').bind('keyup',function(){
		var searchText = $('#search_input').val();
		$.get('http://api.bing.com/qsonhs.aspx?q='+searchText,function(d){
			var d = d.AS.Results[0].Suggests;
			var html = '';
			for(var i=0;i<d.length;i++){
				html += '<li>'+d[i].Txt+'</li>';
			}
			$('#search-result').html(html);
			$('#search-suggest').show().css({
				top:$('#search_form').offset().top+$('#search_input').height()+14,
				left:$('#search_form').offset().left,
				position:'absolute'
			})
		},'json');
	})
	$(document).bind('click',function(){
		$('#search-suggest').hide();
	})

	$(document).delegate('li','click',function(){
		var keyword = $(this).text();
		location.href = 'http://cn.bing.com/search?q='+keyword;
	})
</script>

 一顿js暴打之后圆满结束。

其中涉及的ajax用法如下:

 1.创建xhr对象

 var _xhr = null;

 if(window.XMLHttpRequest){
             _xhr = new window.XMLHttpRequest();
         }else if(window.ActiveObject){
             _xhr = new ActiveObject('Msxml2.XMLHTTP');
         }
         _xhr.onreadystatechange = function(){
             if(_xhr.readyState == 4 && _xhr.status == 200){
                 callback(JSON.parse(_xhr.responseText));
             }
}

2.发送get/post请求

(1)get

    _xhr.open('get',url,false);
    _xhr.send(null);

(2)post

    _xhr.open('post',url,true);

    _xhr.send(data);

 

　　

转载于:https://www.cnblogs.com/yuehenying/p/6752416.html