ajax仿官网搜索功能

ajax仿官网搜索功能献丑了送给那些被为ajax折磨的同学
后台实现代码

//搜索苍老师，如果苍老师在1不再0

function search(){

    $keyword = $_POST['search'];

    $Goods=M('goods');

  //这里我做的一个模糊查询到名字或者对应的id，主要目的因为我这个系统是

  //商城系统里面用到直接看产品ID

    $map['goods_id|goods_name']  = array('like','%'.$keyword.'%');

    // 把查询条件传入查询方法

    if($goods=$Goods->where($map)->select())

    {

    $this->ajaxReturn($goods,'查询成功!',1);


     }else{

    $this->ajaxReturn($data,"查询失败,数据不存在！",0);

     }

    }

前端代码

<script type="text/javascript">

$(document).ready(function(){

  $(".show_message").hide();

  var $search=$('#search_box');

  $("#submit_from").click(function(){

    if($("#search_box").attr("value")=='')

    {

        //alert('请输入文字!');

        $(".show_message").html('错误提示：搜索框文本不能为空！');

        $(".show_message").fadeIn(1000);

        $(".show_message").fadeOut(1000);

        $search.focus();

        //return false;

    }else{

        //开始ajax执行数据

        $.ajax({

            type: "POST",

            url:"/index.php/Goods/search",

            data:{

                search:$search.val()

            },

            dataType: "json",

            success: function (data) {

    if (data.status == 1) {

            //alert(data.info);

            var html='<table class="striped" id="senfe"><thead class="striped-top"><tr><th>商品编号</th><th class="right">商品名字</th><th class="right">添加日期</th><th class="right">商品品牌</th><th class="right">商品价格</th></tr></thead><tbody>';

            /*<th class="right">编辑</th><th class="right">删除</th>*/

                    $.each(data.data,function(no,items){    

                    html+='<tr><td>'+items.goods_id+'</td><td class="right"><a href="/Goods/show/id/'+items.goods_id+'">'+items.goods_name+'</a></td><td class="right">'+items.add_time+'</td><td class="right">'+items.brand+'</td><td class="right">'+items.price+'</td></tr>';

                    /*<td class="right"><a href="/Goods/edit/id/{$vo.goods_id}">编辑</a></td><td class="right"><a href="#">删除</a></td>*/


                    });

                    html+="</tbody></table>";    

                     $(".goods-list").html(' ').html(html);

                   // alert(html);

    }

    else if (data.status == 0) {

        $(".show_message").show();

        $(".show_message").html(data.info);

                    $(".show_message").fadeOut(3000);

    //    alert(data.info);


        return false;

    }

    }

         });

    }

  });

});

</script>

这里是页面代码

        

<div class="search_goods l mt10 mb20">

   <div class="mb5 l search">

     <h2 class="title">搜点什么呢</h2>

     <input type="text" name="search" id="search_box"/>

   </div>

   <a href="javascript:goods_search.submit();" id="submit_from" class="button orange" style="width:34px;height:12px;font-size:13px;color:#000;margin-left:30px;">搜 索</a>

</div>