Query autocomplete V1.6(轻量级搜索自动完成插件)

 2017-10-04 21:34   2117 人阅读  0 条评论

本文主要提供query搜索自动完成插件 autocomplete 的介绍及下载,由nohacks.cn 原创,转载请注明出处!

JS代码:

/*轻量级搜索自动完成处理插件 jquery.autocomplete.js
jquery  autocomplete plus v1.6 by nohacks.cn time: 2017.10.4  
jsonp : "$cb["s":{"text1","text2",...}];"  注:不包括引号,$cb=$_GET["cb"]; 
exp:
    <link href="jquery.autocomplete.css" rel="stylesheet">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>

<input id="wd" type="text" name="searchword" placeholder="请输入关键词"> 
<input type="submit"  id="submit"  value="搜索"/>
<div id="word"></div>
*/

$(function(){

    var $searchInput = $('#wd'); 
    var $autocomplete  =$('#word');

    $searchInput.attr('autocomplete','off'); 
    var selectedItem = null; 
    var timeoutid = null; 
    var setSelectedItem = function(item){ 
        selectedItem = item ; 

        if(selectedItem < 0){ 
          selectedItem = $autocomplete.find('div').length - 1; 
          } 
    else if(selectedItem > $autocomplete.find('div').length-1 ) { 
          selectedItem = 0; 
         } 
//首先移除其他列表项的高亮背景,然后再高亮当前索引的背景 
      $autocomplete.find('div').removeClass('click_hover'); 
      $autocomplete.find('div').eq(selectedItem).addClass('click_hover'); 
}; 

var   removeHTMLTag =   function removeHTMLTag(str) {
            str = str.replace(/<\/?[^>]*>/g,''); //去除HTML tag
            str = str.replace(/[ | ]*\n/g,'\n'); //去除行尾空白
            str = str.replace(/\n[\s| | ]*\r/g,'\n'); //去除多余空行 
str=str.replace(/&quot;/g, '"');  //引号html编码转换
//str=str.replace(/ /ig,'');//去掉所有空格 
            return str;
    }


//键盘键被松开时事件处理程序
$searchInput.keyup(function(){
var keywords = $(this).val();

var ajax_request = function(){ 
if (keywords=='') { $autocomplete.hide(); return };
$.ajax({
url: 'http://mov.nohacks.cn/su.php?wd=' + keywords,
dataType: 'jsonp',
jsonp: 'cb', //回调函数的参数名(发送请求到服务器的key,例如 &key=Callback ) 
// jsonpCallback: 'fun', //回调函数名(值:value,如果为空,默认会用success()处理) 
//  另外还有 beforeSend() ,error:function() 事件处理,这里不需要,被省略。
                
success:function(data){

if (data.s=='')
{
return false; 

}

$autocomplete.empty().show();

$.each(data.s, function(index,term){

$('<div ></div>').text(removeHTMLTag(term)).appendTo($autocomplete)

//设置鼠标悬停效果
.addClass('click_work')
.hover(function(){ $(this).siblings().removeClass('click_hover'); $(this).addClass('click_hover');selectedItem = index; },function(){ $(this).removeClass('click_hover');selectedItem = -1;})  

//注册点击事件

.click(function(){ $searchInput.val(term); $autocomplete.empty().hide(); $('#submit').trigger('click');});

//$autocomplete.append('<div class="click_work">'+ this +'</div>');

})
   
   
   //内容添加完毕
  
  setSelectedItem(0); 


}


})

}  //ajax_request end


        //输入合法字符  
        if(event.keyCode > 40 || event.keyCode == 8 || event.keyCode ==32) { 

            $autocomplete.empty().hide(); 
            clearTimeout(timeoutid); 
            timeoutid = setTimeout(ajax_request,100); 

//上光标
}else if(event.keyCode == 38){ 

          //selectedItem = -1 代表鼠标离开 
           if(selectedItem == -1){ 
 
         setSelectedItem($autocomplete.find('div').length-1); 
 
           } else { 
            setSelectedItem(selectedItem - 1); 
            } 
          
  event.preventDefault(); 

        //下光标 
         }else if(event.keyCode == 40) { 
        
         if(selectedItem == -1){ 
             setSelectedItem(0); 
             } else { 
           
             setSelectedItem(selectedItem + 1); 
             } 
             event.preventDefault(); 
         } 




})   //keyup end


//处理enter键消息 
$searchInput.keypress(function(event){ 
          
   if(event.keyCode == 13) { 
     
       if($autocomplete.find('div').length == 0 || selectedItem == -1) { 
         return; 
         } 
       $searchInput.val($autocomplete.find('div').eq(selectedItem).text()); 
        $autocomplete.empty().hide();
$('#submit').trigger('click');
        event.preventDefault(); 
        } 
    }) 

//处理ESC键消息
    $searchInput.keydown(function(event){ 
        if(event.keyCode == 27 ) { 
       $autocomplete.empty().hide(); 
       event.preventDefault(); 
       } 
    }); 



 //失去焦点时隐藏 
var clear = function(){ $autocomplete.hide();}
    $("input").blur(function(){
    
setTimeout(clear,500); 

})


})

CSS代码:
	#word{
		position: absolute;
		z-index: 99;
		width: 165px;
		height: auto;
		background-color: white;
		border: black solid 1px;
		display: none;
	}
	.click_work{
		padding-bottom: 2px;
		font-weight:lighter;
		font-size: 13px;
		cursor:pointer;/*鼠标放上变成小手*/
	}
	.click_hover{
		
		color: orange;
		background-color: gray;	
				
	}
	
	.error{
		color: gray;
		cursor:pointer;/*鼠标放上变成小手*/
	}
	

前端代码:
<!DOCTYPE html>
<meta charset="utf8">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>seacms Jsonp by nohacks.cn</title>
</head>

<style type="text/css"> 

</style> 
 <link href="js/jquery.autocomplete.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>

<body>
<center>
<h1>星源影视搜索</h1>
	</center>
	<table align="center" cellspacing="0" cellpadding="10" border="0" >
		<tr>
<td style="position: relative;">
<form name="formsearch" id="formsearch" action='su.php' method="post" target="_self">
<input id="wd" type="text" name="searchword" placeholder="请输入关键词">			
<input type="submit"  id="submit"  value="搜索"/>
<div id="word"></div>
				
</form>
				
			</td>
		</tr>
	</table>
</body>


</html>


2017.10.4 更新为V1.6 * JS添加光标移动操作及回车等消息处理。




效果预览:http://mov.nohacks.cn


autocomplete plus v1.6大小: | 来源:本地下载
已经过安全软件检测无毒,请您放心下载。
 

 发表评论


表情

还没有留言,还不快点抢沙发?