thinkphp3+jquery(autocomplete)实现文本框输入内容自动完成
2020-07-05 重庆LiSEO工作室
本程序是使用thinkphp+jquery(autocomplete)实现文本框输入内容自动完成(自动补齐) 功能,当前程序运行的效果图如下:
html代码中需要先引入jquery-ui.css和jquery-ui.js两个文件,然后添加搜索请求地址,其中JS具体代码如下:
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css" /> <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" ></script> <script type="text/javascript"> $(function(){ $("#keywords").autocomplete({ source: "__CONTROLLER__/searchauto", //搜索请求地址 messages: { noResults: '', results: function() {} } }); }); </script>
然后在html页面中用到的文本框代码如下:
<input type="text" placeholder="请输入搜索关键字" id="keywords" />
提交关键词搜索功能的thinkphp代码如下:
public function searchauto(){ $post=M('Post'); //搜索post表 $keywords=I('term'); //接收参数 if(!empty($keywords)){ $result=$post->where("title like '%$keywords%'")->field('title')->select(); if($result){ foreach($result as $value){ //将二维数组转成一维数组 $data[]=$value['title']; } $this->ajaxReturn($data); } else { $this->ajaxReturn(); } } else { $this->ajaxReturn(); } }