首页 > 编程语言 >ajax+javascript+tp搜索页面跳转

ajax+javascript+tp搜索页面跳转

时间:2022-10-13 15:38:06浏览次数:45  
标签:function val searchName pro javascript tp 搜索 跳转 页面

 

 搜索页面代码:

<form class="a" action="/news/search.html"  method="get" role="form" id="searchform">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="{$is_en?'Search':'搜索'}" name="searchName" id="searchName">
    </div>
</form>

<p class="search">
    <i class="iconfont icon-sousuo" ></i>
    <span class="chazhao">{$is_en?'Search':'搜索'}</span>
</p>


  <script>
    $(function(){
        $('.chazhao').click(function(){
            var keyword = $('#searchName').val();
            if(!keyword){
                alert("请输入搜索词");
                return false;
            }
            $('#searchform').submit();
        })
    })
  </script>
 

后台处理:

    public function search(){
        $searchName = I('searchName');
        $this->assign('searchName', $searchName);
        $map['status'] = 1;
        $map['title'] = array('like',"%{$searchName}%");
        
        $pro_list = $this->lists('Newscate', $map, 'sort asc,id desc');
        $this->assign('pro_list', $pro_list);
        $this->display();
    }

搜索后的页面:

       <div class="sousuo">
            <div class="container">
                <div class="ss-top">
                    <h2>{$is_en?'Search result':'搜索结果'}</h2>
                    <div class="ss-content">
                        <volist name="pro_list" id="val">
                            <div class="ss-cont">
                               <a href="/news_detail-{$val.id}.html" style="color: #333333;">
                                <h2>{$val.title}</h2>
                                <p>{$val.content}</p>
                               </a>
                            </div>
                        </volist>
                    </div>
                </div>
            </div>
        </div>

 

标签:function,val,searchName,pro,javascript,tp,搜索,跳转,页面
From: https://www.cnblogs.com/gaoyusui/p/16788273.html

相关文章