基于JavaScript实现类似于百度学术高级检索功能

前端之家收集整理的这篇文章主要介绍了基于JavaScript实现类似于百度学术高级检索功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

百度学术高级检索是通过前台生成后台内部高级语法来实现高级检索的,可以通过前台js做字符串拼接传给后台实现,难度不大:

下面是高级检索的核心功能代码,我使用的是纯js实现,并未使用jquery:

搜索" id="highSearchObj"/>

//省略部分调用关系 this.highSearch = function () { document.getElementById('highSearchObj').disabled=true; var highSearchHtml = '
\
  • \
  • \
  • \
  • \ \ \
    \
    \ \
    \
      sql">
    \ 搜索">\
    '; this.highSearchObj = $(highSearchHtml); $("body").append(this.highSearchObj); $("#conditionObj").click(function(){ var kywds="\""+document.getElementById("kywds").value.split(" ").join("\"&\"")+"\""; var st=document.getElementById("st").value; var nokywds="\""+document.getElementById("nokywds").value.split(" ").join("\"|\"")+"\""; var sql="
  • "; $("#sql").append(sql); }) $("#submitHighSearchObj").click(function(){ var highTags=document.getElementsByName("highTag"); var tags=""; var filters=""; var round=document.getElementById("round").value; var type=document.getElementById("type").value; var reason=document.getElementById("ay").value.split(" ").join(","); var court=document.getElementById("fy").value.split(" ").join(","); var begin=document.getElementById("bg").value; var end=document.getElementById("end").value; if(highTags.length==){ var kywds="\""+document.getElementById("kywds").value.split(" ").join("\"&\"")+"\""; var st=document.getElementById("st").value; var nokywds="\""+document.getElementById("nokywds").value.split(" ").join("\"|\"")+"\""; tags="@("+st+")("+kywds+"-"+nokywds+")"; } else { for(i=;i'); var html = ['
  • 第3行到第36行主要是弹窗的HTML代码

    37,38行使用了js中常用的最简单的在页面中动态修改前台方法

    第39行和第46行均为对新增代码的动作处理,用于提交条件和子条件。

    在第46行的函数里面,做了对字符串的拼接处理。

    在第88行到第96行,实现了通过隐藏表单提交查询条件的js+html调用

    jquery js实现高级条件检索功能中检索条件切换

    基本思路:

    1.HTML:

    使用table展示所有检索条件,使用input控件展示每一个检索条件,定义两种CSS类样式,用以区分检索条件的选中与未选中状态

    2.JS实现:

    为未选中的input绑定点击事件,可通过绑定未选中的样式类来实现,代码实现

    此时就实现了所有检索条件的自动切换

    猜你在找的JavaScript相关文章