搜bigAutocomplete索下拉自动补全插件，Ajax+Thinkphp后台取数据的用法。

最新推荐文章于 2017-04-10 23:12:00 发布
置顶 最新推荐文章于 2017-04-10 23:12:00 发布
阅读量2.9k 收藏 5
点赞数
分类专栏： PHP历程经验 日常技巧 文章标签： bigAutocomplete 自动补全 搜索下拉模糊提示 ajax jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhao1991123/article/details/53170982
版权
一、首先我先说一下，网上有很多案例，不过我试了很多，都是有一些问题的。
  比如：大小写区分、按键盘上下键跳行等问题，下面是我简化和修复了的作品。
二、本地静态数据案例(网上案例很多这个不多说)


  1. html页面代码：
    <script type="text/javascript" src="/js/jquery.bigautocomplete.js"></script>
<form action="#" method="post" name="searchform" id="searchform" class="searchinfo">
<input type="text" id="searchid" value="" class="searchid" />
<input type="submit" value="搜索" class="button" />
</form>
<script type="text/javascript">
  $("#searchid").bigAutocomplete({

    		width:543,
		data:[{title:"abcde",result:{ff:"6666"}},//这个result是返回值
		{title:"abcde"},
		{title:"abcde"},
		{title:"dea"},
		{title:"abcde"},
		{title:"abcde"},
		{title:"bdae"},
		{title:"bcde"},
		{title:"bde"},
		{title:"bcde"}],
		callback:function(data){
			alert(data.title);	
		}
	})
    </script>
    

    

    

    

  2. 实例下载地址：点击下载
 

二、Ajax+Thinkphp+bigAutocomplete后台动态获取数据
 


 
 

  1. html页面代码
 

 

<input type="text"  value=""  id="searchID" placeholder="输入产品型号">

<script type="text/javascript">
        $("#searchID").bigAutocomplete({
           data:[{"model":"number"}],//这里是随便写的，不为空就行。
           callback:function(data){}
         })
</script>












        2. PHP页面代码




    
public function searchlist(){
	$key=$_POST['qkskey'];
	$M=M();
	$sql="这里是数据库查询语句不多说";
        $data = $M->query($sql);
        $this->ajaxReturn($data);
    }







       3. 修改jquery.bigautocomplete.js文件，我这里是把ajax请求直接写入了js文件里。


      注意：这里是修改部分ajax请求。




if(data != null && $.isArray(data) ){
	var data_ = new Array();
		$.ajax({
                        type: "POST",
			async:false,
			contentType: "application/x-www-form-urlencoded; charset=utf-8",
			url: "?s=/Home/Info/searchlist",
			data: {"qkskey":$("#searchID").val()}, 
			dataType: "json", 
			success:function(data){    
			for(var i=0;i<data.length;i++){
							
			if(data[i].model.indexOf(keyword_) > -1){
								
			data_.push(data[i]);
								
			}
		}
		}
}) 
						















// JavaScript Document
(function($){
	var bigAutocomplete = new function(){
		currentInputText = null;//目前获得光标的输入框（解决一个页面多个输入框绑定自动补全功能）
		this.functionalKeyArray = [9,20,13,16,17,18,91,92,93,45,36,33,34,35,37,39,112,113,114,115,116,117,118,119,120,121,122,123,
                 144,19,145,40,38,27];//键盘上功能键键值数组
		this.holdText = null;//输入框中原始输入的内容
	
		//初始化插入自动补全div，并在document注册mousedown，点击非div区域隐藏div
		this.init = function(){
			$("body").append("<div id='bigAutocompleteContent' class='bigautocomplete-layout'></div>");
			$(document).bind('mousedown',function(event){
				var $target = $(event.target);
				if((!($target.parents().andSelf().is('#bigAutocompleteContent'))) && (!$target.is($(currentInputText)))){
					bigAutocomplete.hideAutocomplete();
				}
			})
			
			//鼠标悬停时选中当前行
			$("#bigAutocompleteContent").delegate("tr", "mouseover", function() {
				$("#bigAutocompleteContent tr").removeClass("ct");
				$(this).addClass("ct");
			}).delegate("tr", "mouseout", function() {
				$("#bigAutocompleteContent tr").removeClass("ct");
			});		
			
			
			//单击选中行后，选中行内容设置到输入框中，并执行callback函数
			$("#bigAutocompleteContent").delegate("tr", "click", function() {
				$(currentInputText).val( $(this).find("div:last").html());
				var callback_ = $(currentInputText).data("config").callback;
				if($("#bigAutocompleteContent").css("display") != "none" && callback_ && $.isFunction(callback_)){
					callback_($(this).data("jsonData"));
					
				}				
				bigAutocomplete.hideAutocomplete();
			})			
			
		}
		
		this.autocomplete = function(param){
			
			if($("body").length > 0 && $("#bigAutocompleteContent").length <= 0){
				bigAutocomplete.init();//初始化信息
				
			}	
					
			var $this = this;//为绑定自动补全功能的输入框jquery对象
			
			var $bigAutocompleteContent = $("#bigAutocompleteContent");

			
			
			this.config = {
			               //width:下拉框的宽度，默认使用输入框宽度
			               width:0,
			               //url：格式url:""用来ajax后台获取数据，返回的数据格式为data参数一样
			               url:null,
			               /*data：格式{data:[{model:null,result:{}},{model:null,result:{}}]}
			               url和data参数只有一个生效，data优先*/
			               data:null,
			               //callback：选中行后按回车或单击时回调的函数
			               callback:null};
			$.extend(this.config,param);
			
			$this.data("config",this.config);
			
			//输入框keydown事件
			$this.keydown(function(event) {
				var node = event.currentTarget;
				switch (event.keyCode) {
				case 40://向下键
					
					if($bigAutocompleteContent.css("display") == "none")return;
			
					//alert($bigAutocompleteContent);
					var $nextSiblingTr = $bigAutocompleteContent.find(".ct");
					//var $nextSiblingTr = $('bigAutocompleteContent').find(".ct")
					if($nextSiblingTr.length <= 0){//没有选中行时，选中第一行
						$nextSiblingTr = $bigAutocompleteContent.find("tr:first");
						
					}else{
						
						$nextSiblingTr = $nextSiblingTr.next();
					}
					$bigAutocompleteContent.find("tr").removeClass("ct");
					
					if($nextSiblingTr.length > 0){//有下一行时（不是最后一行）
						$nextSiblingTr.addClass("ct");//选中的行加背景
						$(node).val($nextSiblingTr.find("div:last").html());//选中行内容设置到输入框中
						
						//div滚动到选中的行,jquery-1.6.1 $nextSiblingTr.offset().top 有bug，数值有问题
//$bigAutocompleteContent.scrollTop($nextSiblingTr[0].offsetTop - $bigAutocompleteContent.height() + $nextSiblingTr.height() );
						
					}else{
						$(node).val(bigAutocomplete.holdText);//输入框显示用户原始输入的值
					}
					
					
					break;
				case 38://向上键
					if($bigAutocompleteContent.css("display") == "none")return;
					
					var $previousSiblingTr = $bigAutocompleteContent.find(".ct");
					if($previousSiblingTr.length <= 0){//没有选中行时，选中最后一行行
						$previousSiblingTr = $bigAutocompleteContent.find("tr:last");
					}else{
						$previousSiblingTr = $previousSiblingTr.prev();
					}
					$bigAutocompleteContent.find("tr").removeClass("ct");
					
					if($previousSiblingTr.length > 0){//有上一行时（不是第一行）
						$previousSiblingTr.addClass("ct");//选中的行加背景
						$(node).val($previousSiblingTr.find("div:last").html());//选中行内容设置到输入框中
						
						//div滚动到选中的行,jquery-1.6.1 $$previousSiblingTr.offset().top 有bug，数值有问题
	$bigAutocompleteContent.scrollTop($previousSiblingTr[0].offsetTop - $bigAutocompleteContent.height() + $previousSiblingTr.height());
					}else{
						$(node).val(bigAutocomplete.holdText);//输入框显示用户原始输入的值
					}
					
					break;
				case 27://ESC键隐藏下拉框
					
					bigAutocomplete.hideAutocomplete();
					break;
				}
			});		
			
			//输入框keyup事件
			$this.keyup(function(event) {
				var k = event.keyCode;
				var node = event.currentTarget;
				var ctrl = event.ctrlKey;
				var isFunctionalKey = false;//按下的键是否是功能键
				for(var i=0;i<bigAutocomplete.functionalKeyArray.length;i++){
					if(k == bigAutocomplete.functionalKeyArray[i]){
						isFunctionalKey = true;
						break;
					}
				}
				//k键值不是功能键或是ctrl+c、ctrl+x时才触发自动补全功能
				if(!isFunctionalKey && (!ctrl || (ctrl && k == 67) || (ctrl && k == 88)) ){
					var config = $(node).data("config");
					
					var offset = $(node).offset();
					if(config.width <=0){
						config.width  = $(node).outerWidth() - 2
					}
					$bigAutocompleteContent.width(config.width);
					var h = $(node).outerHeight() - 1;
					$bigAutocompleteContent.css({"top":offset.top + h,"left":offset.left});
					
					var data = config.data;
					var url = config.url;
					var keyword_ = $.trim($(node).val().toUpperCase());
					if(keyword_ == null || keyword_ == ""){
						bigAutocomplete.hideAutocomplete();
						return;
					}					
					if(data != null && $.isArray(data) ){
						var data_ = new Array();
						$.ajax({
         							type: "POST",
									async:false,
									contentType: "application/x-www-form-urlencoded; charset=utf-8",
									url: "?s=/Home/Info/searchlist",
							   		data: {"qkskey":$("#searchID").val()}, 
									dataType: "json", 
									success:function(data){    
							for(var i=0;i<data.length;i++){
							
							if(data[i].model.indexOf(keyword_) > -1){
								
								data_.push(data[i]);
								
							}
						}
								  	}
							   	}) 
						
						
						makeContAndShow(data_);
					}else if(url != null && url != ""){//ajax请求数据
						$.post(url,{keyword:keyword_},function(result){
							makeContAndShow(result.data)
						},"json")
						
					}

					
					bigAutocomplete.holdText = $(node).val();
				}
				//回车键
				if(k == 13){
					var callback_ = $(node).data("config").callback;
					if($bigAutocompleteContent.css("display") != "none"){
						if(callback_ && $.isFunction(callback_)){
							callback_($bigAutocompleteContent.find(".ct").data("jsonData"));
						}
						$bigAutocompleteContent.hide();						
					}
				}
				
			});	
			
					
			//组装下拉框html内容并显示
			function makeContAndShow(data_){
				if(data_ == null || data_.length <=0 ){
					return;
				}
				
				var cont = "<table><tbody>";
				for(var i=0;i<data_.length;i++){
cont += "<tr id="+i+"><td><div>" + data_[i].model + "</div></td><td width='25%' class='bignumber'>约有"+data_[i].number+"个商品</td></tr>"
				}
				cont += "</tbody></table>";
				$bigAutocompleteContent.html(cont);
				$bigAutocompleteContent.show();
				
				//每行tr绑定数据，返回给回调函数
				$bigAutocompleteContent.find("tr").each(function(index){
					$(this).data("jsonData",data_[index]);
				})
			}			
					
			
			//输入框focus事件
			$this.focus(function(event){
				currentInputText = event.currentTarget;
			});
			
		}
		//隐藏下拉框
		this.hideAutocomplete = function(){
			var $bigAutocompleteContent = $("#bigAutocompleteContent");
			if($bigAutocompleteContent.css("display") != "none"){
				$bigAutocompleteContent.find("tr").removeClass("ct");
				$bigAutocompleteContent.hide();
			}			
		}
		
	};
	
	
	$.fn.bigAutocomplete = bigAutocomplete.autocomplete;
	
})(jQuery)


      4. Css代码





.bigautocomplete-layout{display:none;background-color:#FFFFFF;border:1px solid #BCBCBC;position:absolute;z-index:10000;
overflow-x:hidden;overflow-y:auto; }
.bigautocomplete-layout table{border-collapse:collapse;border-spacing:0;background:none repeat scroll 0 0 #FFFFFF;width:100%;cursor:default;}
.bigautocomplete-layout table tr{background:none repeat scroll 0 0 #FFFFFF; height:30px;}
.bigautocomplete-layout .ct{background:none repeat scroll 0 0 #1e8efc !important; color:#FFF;}
.bigautocomplete-layout div{word-wrap:break-word;word-break:break-all;padding:1px 5px;}
.bignumber{ color:#A1A1A1; }
.bigautocomplete-layout .ct .bignumber{ color:#fff;}










                

        

        

    

  


    

      

        

            

              
                
                  子幽七
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
js自动补全插件bigautocomplete

				
			

			

				

					02-08
				

			

		

		

			
				
超好用的js自动补全插件，源码简单易懂，可根据自己的需求更改，依赖的jQuery版本略js自动补全插件bigautocomplete

			
		

	



                

            
              



	

		

			

				
					
input自动补全js插件 bigautocomplete

				
			

			

				

					12-03
				

			

		

		

			
				
在搜索的过程中，有的程序需要自动补全输入内容，类似联想查询

			
		

	



              


  
              

                


	

		

			

				
					
非常好用的JQuery自动补全插件bigautocomplete

				
			

			

				

					weixin_33860553的博客
				

				

					01-04
					
					148
					
				

			

		

		

			
				
2019独角兽企业重金招聘Python工程师标准>>>   
                                        
         ...

			
		

	





	

		

			

				
					
bigautocomplete的用法（包括后台数据的交互）模仿百度搜索样式

				
			

			

				

					NotBad_的博客
				

				

					10-12
					
					1619
					
				

			

		

		

			
				
一，没有与后台进行交互

首先要将bigautocomplete加载进来





[html] view
 plain copy


 print?



span style="font-size:18px;">link rel="stylesheet" href="../css/jquery.bigautocomplete.css" type="text/cs

			
		

	



		

			
		



	

		

			

				
					
TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结

				
			

			

				

					10-15
				

			

		

		

			
				
本文将详细介绍如何在TP5框架下利用Ajax技术进行后台数据交互，主要包括两种方法：使用serialize()方法和利用layui的form.on事件。  **方法一：serialize() 方法**  serialize() 是jQuery提供的一个方法，它能够将...

			
		

	





	

		

			

				
					
thinkphp5 + ajax 使用formdata提交数据（包括文件上传） 后台返回json完整实例

				
			

			

				

					12-20
				

			

		

		

			
				
本文实例讲述了thinkphp5 + ajax 使用formdata提交数据（包括文件上传） 后台返回json。分享给大家供大家参考，具体如下： 知识点总结 1.json格式标准  { 'key':"value" } {"state":"1","msg":"\u7b80\u5386\u6295\u...

			
		

	





	

		

			

				
					
360影视双端H5源码自动更新版APP+ThinkPHP后台+分销推广

				
			

			

				

					03-04
				

			

		

		

			
				
360影视双端H5源码自动更新版APP+ThinkPHP后台+分销推广+一键安装+安装修改教程 自带一键安装引导，开源无加密，积分商城，自动同步360影视信息,这个版本不是很常见，搭建使用需要基础！

			
		

	





	

		

			

				
					
基于AntDesignProVue+Thinkphp6.0开发的后台管理系统.zip

				
			

			

				

					12-13
				

			

		

		

			
				
项目基于tp6.0+阿里云知名前端框架antDesignVue开发后台管理系统，源码中已包含前后端源代码及部分后台已开发好的功能，包含权限管理，角色管理，规则管理等。仅供学习使用。数据库结构在tp6源代码根目录下。直接...

			
		

	





	

		

			

				
					
bigautocomplete文本搜索和自动补全控件

				
			

			

				

					07-20
				

			

		

		

			
				
JQuery插件：bigautocomplete文本搜索和自动补全控件，已经转码为utf-8。

			
		

	





	

		

			

				
					
bigAutocomplete插件jQuery搜索提示框效果实例

				
			

			

				

					11-15
				

			

		

		

			
				
bigAutocomplete插件jQuery搜索提示框效果实例
非常好用，可以动态获取。

			
		

	





	

		

			

				
					
jquery autocomplete

				
			

			

				

					03-26
				

			

		

		

			
				
jquery.bigautocomplete.css
jquery.bigautocomplete.js

			
		

	





	

		

			

				
					
jquery Autocomplete插件，搜索自动完成

				
			

			

				

					08-25
				

			

		

		

			
				
jQuery plugin: Autocomplete 参数及实例
官网：jQuery plugin: Autocomplete         
此插件依赖于 jquery 1.2.6 --- jquery 1.8.3 
转自：http://www.cnblogs.com/duanhuajian/p/3398904.html

			
		

	





	

		

			

				
					
Jquery实现仿搜索引擎文本框自动补全插件

				
			

			

				

					01-05
				

			

		

		

			
				
Jquery实现仿搜索引擎文本框自动补全插件功能很实用，使用也很简单，引入了插件之后写几行代码就可以实现，可以灵活设置 //width:下拉框的宽度，默认使用输入框宽度、用来ajax后台获取数据，返回的数据格式为data参数一样、数据格式{data:[{title:null,result:{}},{title:null,result:{}}]}url和data参数只有一个生效，data优先、选中行后按回车或单击时回调的函数

			
		

	





	

		

			

				
					
Jquery的big自动补全插件，Ajax后台取数据的用法 插件bigAutocomplete

				
			

			

				

					mxl0632的专栏
				

				

					01-14
					
					472
					
				

			

		

		

			
				
      这些天，自己动手练习servlet项目BBS系统（运行环境win7+MySql+Myeclipse6.5）。
       各个功能都是自己想着法子往上面添加，于是，在用户登录界面，异想天开的想加一个搜索引擎（百度、搜狗等）那样的自动补全功能，随着客户自己输入，自动下拉弹出相关的内容供客户选择，当然，下拉的东西都是从后台获取的。
       在网上搜索，相关的插件还真有不错的，比...

			
		

	





	

		

			

				
					
bigautocomplete实现联想输入，自动补全

				
			

			

				

					weixin_34113237的博客
				

				

					07-08
					
					208
					
				

			

		

		

			
				
bigautocomplete是一款Jquery插件。用它实现仿搜索引擎文本框自动补全插件功能很实用，使用也很简单，引入了插件之后写几行代码就可以实现，可以灵活设置。
先看效果图：

 
上图是通过ajax请求服务器返回的数据。下面简单介绍如何使用。
 


一、如何使用：
   引入jquery.bigautocomplete.js和jquery.bigautocomplete...

			
		

	





	

		

			

				
					
thinkphp之自动完成

				
			

			

				

					weixin_30346033的博客
				

				

					04-10
					
					103
					
				

			

		

		

			
				
1.自动完成
　　自动完成是ThinkPHP提供用来完成数据自动处理和过滤的方法，使用create方法创建数据对象的时候会自动完成数据处理。
　　 因此，在ThinkPHP使用create方法来创建数据对象是更加安全的方式，而不是直接通过add或者save方法实现数据写入。
　　
　　1.1自动完成功能
　　自动完成通常用来：①.完成默认字段写入②.安全字段过滤③.业务逻辑的自动处理等...

			
		

	





	

		

			

				
					
使用Ajax实现自动完成

				
			

			

				

					遮住阳光
				

				

					09-08
					
					264
					
				

			

		

		

			
				
使用Ajax实现自动完成
1.初始化：使用DIV作为提示框，初始化时无边框，背景与网页背景一致；
2.在文本框输入时，触发onKeyUp事件，在数据库中查询以用户输入字符串开头的所有字符串，返回给客户端；
3.客户端接收到响应后清除提示框，将返回的字符串加入到D提示框中，边框设为1，根据文本框的位置设定提示框的位置；
4.鼠标点击提示框中的字符串时，改变背景色和前景色，实现选中效果，将字符...

			
		

	





	

		

			

				
					
ThinkPHP+MySQL+Ajax 实现百度搜索仿效教程

				
			

			

				

					
				

			

		

		

			
				
本篇文章详细探讨了如何利用ThinkPHP（TP）框架、MySQL数据库以及Ajax技术，实现一个类似百度搜索的即时搜索功能。作者通过实际操作和完整实例，向读者展示了如何构建这样一个功能，包括数据库设计、控制器编写、...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值