[email protected]   15826058953
B2B外贸网站建设与运营,WEB服务器运维,始于2016。

thinkphp3+jquery(autocomplete)实现文本框输入内容自动完成

2020-07-05     重庆LiSEO工作室    

本程序是使用thinkphp+jquery(autocomplete)实现文本框输入内容自动完成(自动补齐) 功能,当前程序运行的效果图如下:

thinkphp3+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();
    }
}