巧用逐浪CMS API做仿搜索引擎搜索下拉提示(附代码)

返回逐浪CMS技术讨论区
3回复贴,共1页,点击数:890

一直都有一个想法给自己的网站上做一个搜索,就像百度搜索那样,一输入关键词就出现下拉提示,以前用MVC版本的时候,基本逐浪后台的会员接口功能做过一个,现在用.NET V8了,没有个功能模块了,更新为更高级的API接口了。
逐浪CMS是有一个搜索功能的,
/Search/ 这是搜索主页
/Search/SearchList?keyword=XXXXX 这是搜索直达
功能也是非常强大的,但是因为我的网站的类别不一样,所以需要别的样的搜索。于是自己一直有这么一个想法。前几天逐浪新版本发布了,看了一下自己好像能看懂,就改了一下。不会的地方找逐浪CMS爱好者阿宁给加工了一下就出现了属于我们自己的搜索下拉提示

先上效果
网址:htpp://weihai.3j99.cn
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
原理说明:
程序:逐浪CMS API接口 需要修改一下
版本:CMS V8.2.0 正式版
文件: /pages/api/wxapp.cshmtl 重命名一下换为search.cshtml 防止升级程序是被替换了
首先是开启逐浪CMSapi接口
在这里插入图片描述
一会要用这里的Application ID和访问APIKey

下面修改search.schtml

这里主要是基于content_list 事件写的

case "content_list":

复制修改后如下:

//—新房搜索
case “search_xf”://命名事件
{
//支持pic:单图,pics:多图(三图预览)
//专用修改,只允许上传一个节点ID,节点取第一个绑定的模型
int elite = DataConvert.CLng(Req(“elite”));//是否只抽推荐内容
int modelId = DataConvert.CLng(GetParam(“modelId”));
string xfkey = DataConvert.CStr(GetParam(“xfkey”));
int pnid = DataConvert.CLng(GetParam(“pnid”));//取哪个父节点下内容,与nid互斥
int nid = DataConvert.CLng(GetParam(“nid”));//要取哪个节点的数据
string nids = GetParam(“nids”);
if (pnid > 0)
{
DataTable nodeDT = nodeBll.SelByPid(pnid, true);
nids = StrHelper.GetIDSFromDT(nodeDT, “NodeID”);
}
//———————————
if (modelId < 1)
{
object modelIds = null;
if (nid > 0)
{
modelIds = DBCenter.ExecuteScala(“ZL_Node”, “ContentModel”, “NodeID=” + nid);
}
else if (pnid > 0)
{
modelIds = DBCenter.ExecuteScala(“ZL_Node”, “ContentModel”, “NodeID=” + pnid);
}
else if (!string.IsNullOrEmpty(nids))
{
int nodeId = DataConvert.CLng(nids.Split(‘,’)[0]);
modelIds = DBCenter.ExecuteScala(“ZL_Node”, “ContentModel”, “NodeID=” + nodeId);
}
modelId = DataConvert.CLng(DataConvert.CStr(modelIds).Split(‘,’)[0]);
}
PageSetting setting = new PageSetting() { cpage = CPage, psize = PSize };
setting.pk = “GeneralID”;
setting.t1 = “ZL_CommonModel”;
setting.on = “A.ItemID=B.ID”;
setting.fields = “A.NodeID,A.GeneralID,A.Title,A.CreateTime,A.Inputer,A.TopImg”;//默认是没有nodeid的,我这里功能需要加上了
setting.fields += “,B.*”;//以B.pic为准
setting.where = “A.Status=99 AND (A.Title like ‘%” + xfkey +”%’ or a.Subtitle like ‘%” + xfkey +”%’ or B.kfs like ‘%” + xfkey +”%’ or A.PYtitle like ‘%” + xfkey +”%’ or B.sq like ‘%” + xfkey +”%’ or B.lpdz like ‘%” + xfkey +”%’)”;
if (nid > 0) { setting.where += “ AND A.NodeID=” + nid; }
if (modelId > 0) { setting.where += “ AND A.ModelID=” + modelId; }
if (elite > 0) { setting.where += “ AND A.EliteLevel=1 “; }
if (!string.IsNullOrEmpty(nids))
{
SafeSC.CheckIDSEx(nids);
setting.where += “ AND NodeID IN (“ + nids + “)”;
}
if (!string.IsNullOrEmpty(ids))
{
SafeSC.CheckDataEx(ids);
setting.where += “ AND A.GeneralID IN (“ + ids + “)”;
}
setting.order = “A.OrderID DESC,A.GeneralID DESC”;
setting.t2 = DataConvert.CStr(DBCenter.ExecuteScala(“ZL_Model”, “TableName”, “ModelID=” + modelId));

                        DBCenter.SelPage(setting);
                        //------------修改缩略图路径(统一使用Pic字段)

                        for (int i = 0; i < setting.dt.Rows.Count; i++)
                        {
                            DataRow dr = setting.dt.Rows[i];
                            dr["TopImg"] = WXAppData.H_ImageUrl(DataConvert.CStr(dr["TopImg"]));
                            if (setting.dt.Columns.Contains("pic")) { dr["pic"] = WXAppData.H_ImageUrl(DataConvert.CStr(dr["pic"])); }
                        }

                        setting.dt.Columns.Remove("ID");
                        retMod.retcode = M_APIResult.Success;
                        retMod.result = JsonConvert.SerializeObject(setting.dt);
                        retMod.page = new M_API_Page(setting);
                    }
                    break;

                case "content_add"://添加一篇内容,方法:action=content_add&content={"ModelID":2,"title":"标题内容","inputer":"admin","nodeId":100,"Status":0,orderid:1,hits:222}&addon={"content":"副表内容在这里"} 
                                   //[status=99审核无效,必须web后台审核],或定时任务审核
                    {
                        //正文与附属内容
                        string content = Req("content");
                        string addon = Req("addon");
                        if (string.IsNullOrEmpty(content)) { throw new Exception("未指定内容"); }
                        if (string.IsNullOrEmpty(addon)) { throw new Exception("未指定附表内容"); }

                        M_CommonData conMod = JsonConvert.DeserializeObject<M_CommonData>(content);
                        string tbname = DataConvert.CStr(DBCenter.ExecuteScala("ZL_Model", "TableName", "ModelID=" + conMod.ModelID));
                        conMod.Status = (int)ZLEnum.ConStatus.Recycle;
                        conMod.CreateTime = DateTime.Now;
                        conMod.UpDateTime = DateTime.Now;
                        conMod.TableName = tbname;
                        DataTable dt = JsonConvert.DeserializeObject<DataTable>("[" + addon + "]");
                        DataRow dr = dt.Rows[0];
                        //--------------------------
                        conMod.ItemID = DBCenter.Insert(tbname, BLLCommon.GetFields(dr), BLLCommon.GetParas(dr), BLLCommon.GetParameters(dr));
                        conMod.GeneralID = DBCenter.Insert(conMod);
                        retMod.retcode = M_APIResult.Success;
                        retMod.result = conMod.GeneralID.ToString();
                    }
                    break;

然后前端HTML代码

<style>
#result-box { display: none; position: absolute; z-index: 2; }
</style>
<div class="tab-pane active" id="lp">
<form class="" role="search" method="get" action="{ZL:GetHotinfo(1)/}" target="_blank">
<div class="input-group  input-group-lg">
<input type="text" class="form-control" name="key"   id="searchxf"  onkeyup="showxf(this.value)" placeholder="楼盘名/开发商/区域/商圈" placeholder="楼盘名/开发商" autocomplete="off">
<span class="input-group-btn">
<button type="submit" class="btn btn-lg btn-success">搜索新房</button>
</span> </div>
</form>
</div>
<div id="result-box" class="bg-light border border-success border-top-0 rounded">
<ul id="result" class="list-unstyled pl-3 pr-3 pt-2">
</ul>
</div>

前端JS

/*!
*  BY 山东上格信息科技有限公司
* 官网 http://www.3j99.com
* Powerd by 上格筑家网 www.3j99.cn
*/
//定义result-box宽度
var w = $("#searchxf").width();
$("#result-box").css("width",w);
//点击空白则隐藏result-box
$('body').click(function(){
       $("#result-box").hide();//菜单隐藏
   });
function showxf(str)
{
  var xmlhttp;
  if (str.length==0)
  { 
    //document.getElementById("txtHint").innerHTML="";
    return;
  }
 $.get('/API/search?apiId=xxxxxxxx&apiKey=xxxxxx&action=search_xf&psize=10&modelId=52&xfkey='+str,function(res){//xxxxxx输入上面的ID和key,action为例的事件&psize显示数&modelId为模型
 $("#result-box").show();//当有输入的时候显示
   console.log(res)
  //document.getElementById("txtHint").innerHTML = ' 结果'+ res.retcode;
  var result = JSON.parse(res.result);
      console.log(result);
      var html = '';

      result.forEach(function(v,k){
        html += `<li><a class="text-secondary" href="/Class_${v.NodeID}/Default">${v.Title} <span class="float-right hidden-md"> ${v.sq}</span></a> </li>`;//拼接HTML+CSS样式
      })
      $('#result').html(html);

 },'JSON')
}

为了方便全局引用,我将JS新建一个JS文件 api.js 需要要的时候引用一下就OK

1楼 2020/10/25 11:54

欢迎大家在一起讨论一下,希望可以有更方便的做法

2楼 2020/10/25 12:07 收起回复

老板,你不会用代码符写md?

3楼 2020/10/25 12:13 收起回复
上格筑家网:

不会,就会点鼠标

2020/10/25 12:17 回复

用上社区自带的编辑器编辑就更好了。

4楼 2020/10/25 20:36 收起回复
您未登录,没有发贴权限[点此登录]