Thinphp ajax搜索框實施搜索提示

在這裏插入圖片描述

js


				<div class="login-left"   style="padding-bottom:20px;
				width:442px;
				margin-top:56px;
				margin-left: 200px;">
						
						<form action="{:U('/Search/index')}" method="get">
							<input type="text" class="text yhmiput" name="keywords" id="keywords" autocomplete='off' placeholder="">
							<input class="login-sub" type="submit" value="搜索" >
							
						</form>
					</div>

					
				<div  id="searchBox"   style="
				padding-bottom: 20px;
				float: left;
				width: 362px;
				margin-top: -19px;
				margin-left: 220px;
				border: 1px red solid;
				">
						
					暫無搜索結果

					</div>

					<script type="text/javascript">  
						var flag = true;
						$('#keywords').on('compositionstart',function(){
								flag = false;
						})
						$('#keywords').on('compositionend',function(){
								flag = true;
						})
						$('#keywords').on('input',function(){
								var _this = this;
								setTimeout(function(){
										if(flag){
											$(document).ready(function() {  
											var keywords = $("input").serialize();  
											var url = "{:U('/Search/searchbox')}";  
											$.ajax({  
											type: "post",  
											url: url,  
											dataType: "json",  
											data: keywords,  
											success: function(data){  
												//console.log(data);
											if (data.length != 0 ) {
																var lists = "<ul>";  
																$.each(data, function () {  
																		lists +="<br /><u><li>"+  "<a href='{:U('/Detail/index/id/"+this.id+"')}'>"   +this.title+"</a></li></u>";
																		//遍歷出每一條返回的數據  
																});  
																lists+="</ul>";  
																$("#searchBox").html(lists).show();//將搜索到的結果展示出來  
																$("li").click(function(){  
																	//$("#keywords").val($(this).text());//點擊某個li就會獲取當前的值  
																$("#searchBox").hide();  
																})  
														} else {  
																$("#searchBox").hide();  
															}  
																				
											
											
											}  
											});  
											});  
												
											
										}
								},0)
						})

	  
					</script>  

php


    public function searchbox(){

        
        if(I('post.keywords')!=""){

            $keywords = I('post.keywords');//獲取關鍵字
       
             $map['title']=array('like','%'.$keywords.'%');
             $blog_title=$this->blog_model->where($map)->limit(5)->field('title,id')->select();//獲取關鍵字的titleid
             $this->ajaxReturn($blog_title);//返回
          }
    
         

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章