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);//返回
          }