即时搜索,每输一个字符即查询(类似百度)

<div class="input">
         <input type="text" name="subject" id="subject" value="" placeholder="广告位招租"/>
      <a href="Javascript:searchSubmit(this)" target="_blank"></a>
   <!--平台搜索下拉-->
   <div id="option_mdg">
      <div id="listEmail" class="listEmail">
         <dl class="pList">
           
         </dl>
      </div>
   </div>
</div>

 <script>
             // 输入框内容改变时触发
           $('#subject').bind('input propertychange', function() {
     var searchVal = $("#subject").val();
     searchPlatform(searchVal);
           });

           function searchPlatform(searchVal) {
               var action = basePath + "/platformInfo/searchPlatform/"+searchVal;
               var callback = function (data) {
                   if (data.code == "88") {
                       // alert(JSON.stringify(data.data));
                       $(".pList").remove();  // 删除存放关键字平台的列表
                       var pList = data.data;
                       // 若有该关键字平台
                       if (pList.length > 0){
                           $("#option_mdg").css("display","inline");   // 显示下拉菜单
                           $(".listEmail").append("<dl class='pList'></dl>");  // 创建存放关键字平台的列表
                           $(".pList").append("<div class='pingtai'>平台</div>"); // 显示平台图标
              // 循环列出每个平台
                           for(var i=0;i<pList.length;i++){
                               var obj = pList[i];
                               // alert(obj.pname);
                               var claimstatus;
                               var operatingstatus;
                               if(obj.operatingstatus == "1"){  // 正常平台显示认领状态
                                   operatingstatus = "正常";
                                   $(".pList").append("<dd onclick='pDetail("+obj.id+")'>" +
                                       "<p class='float_l'>"+obj.pname+"</p>" +
                                       "<p class='float_r lan'>"+operatingstatus+"</p>" +
                                       "<div class='clear'></div></dd>");
                 }else{  // 非正常平台显示运营状态
                    if (obj.operatingstatus == "2"){
                                       operatingstatus = "跑路";
                    }
                                   $(".pList").append("<dd onclick='pDetail("+obj.id+")'>" +
                                       "<p class='float_l'>"+obj.pname+"</p>" +
                                       "<p class='float_r hong'>"+operatingstatus+"</p>" +
                                       "<div class='clear'></div></dd>");
                 }
                           }
           }
                   } else {
                   }
               }
               $.post(action,callback);
           }

           function pDetail(pid) {
               window.open(basePath+"/platformInfo/platformDetail/"+pid);
           }

 $(document).ready(function(){
    $("#subject").focus(function(){
       // $("#option_mdg").css("display","none");
       // $("#option_mdg").fadeIn(200);  // 显示
    });
    // 指针焦点离开时触发
    $("#subject").blur(function(){
       $("#option_mdg").fadeOut(200); // 隐藏
    });
 });
 </script>
@RequestMapping("searchPlatform/{pname}")
@ResponseBody
public ProcessBack searchPlatform(@PathVariable String pname){
   ProcessBack processBack = new ProcessBack();
   try {
      Wrapper<PlatformInfo> infoWrapper = Condition.create();
      infoWrapper.like("pname",pname);
      List<PlatformInfo> infoList = platformInfoService.selectList(infoWrapper);
      processBack.setData(infoList);
      processBack.setCode(ProcessBack.SUCCESS_CODE);
      processBack.setMessage("查询成功");
      return processBack;
   }catch (Exception e){
      e.printStackTrace();
   }
   processBack.setCode(ProcessBack.FAIL_CODE);
   processBack.setMessage("因网络响应不及时,操作失败,请联系客服排查或重新操作");
   return processBack;
}

猜你喜欢

转载自blog.csdn.net/qzc2017/article/details/86089674