网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 基于JavaScript实现类似于百度学术高级检索功能
内容
    这篇文章主要介绍了基于JavaScript实现类似于百度学术高级检索功能 的相关资料,需要的朋友可以参考下
    下面是高级检索的核心功能代码，我使用的是纯js实现，并未使用jquery：
    <p>
    <input type="submit" value="高级搜索" id="highSearchObj"/>
    </p> 
    //省略部分调用关系
    this.highSearch = function () {
    document.getElementById('highSearchObj').disabled=true; 
    var highSearchHtml = '<div><div><ul> \
    <li><span id="tabReg">包含关键词</span><input id="kywds" value=""></li> \
    <li><span id="tabReg">不包含关键词</span><input id="nokywds" value=""></li>\
    <li><span id="tabReg">检索范围</span>\
    <select id="st">\
    <option value ="byrw">本院认为</option>\
    <option value ="sljg">审理经过</option>\
    <option value="ygsc">原告诉称</option>\
    <option value="bgbc">被告辩称</option>\
    </select></li>\
    </ul>\
    <input id="conditionObj" type="submit" value="新增一组条件"></input>\
    <hr>\
    <div>\
    <select id="type">\
    <option value ="all">全部</option>\
    <option value ="pj">判决</option>\
    <option value ="cd">裁定</option>\
    <option value="tz">通知</option>\
    <option value="jd">决定</option>\
    <option value="tj">调解</option>\
    </select><select id="round">\
    <option value ="all">全部</option>\
    <option value ="one">一审</option>\
    <option value ="two">二审</option>\
    <option value="again">再审</option>\
    </select>\
    <input id="bg" value="">-<input id="end" value="">\
    <ul><li><span id="tabReg">案由</span><input id="ay" value=""></input></li>\
    <li><span id="tabReg">法院</span><input id="fy" value=""></input></li>\
    </ul></div>\
    <ul id="sql"></ul>\
    <input id="submitHighSearchObj" type="submit" value="提交高级搜索"></input>\
    </div></div>';
    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="<li name=\"highTag\">@("+st+")("+kywds+"-"+nokywds+")</li>";
    $("#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<highTags.length;i++){
    tags+=highTags[i].innerHTML;
    } 
    }
    if(round !="all") {
    filters+=" round:"+round+";";
    }
    if(type !="all") {
    filters+=" type:"+type+";";
    }
    if(reason !="") {
    filters+=" reason:"+reason+";";
    }
    if(court !="") {
    filters+=" court:"+court+";";
    }
    if(begin !="" && end !="") {
    filters+=" year:";
    while(begin<=end) {
    filters=filters+begin+",";
    begin++;
    }
    }
    if(filters !="") {
    tags="magic:"+tags+";filter:"+filters;
    }
    var formObj = $('<form id="form" action="/search" target="_self" method="get"></form>');
    var html = ['<input type="hidden" name="type" value="">'];
    html.push('<input type="hidden" name="keyword" value="' + encodeURIComponent(tags) + '">');
    html.push('<input type="hidden" name="TypeKey" value="' + encodeURIComponent(tags) +'">');
    formObj.html(html.join(","));
    $("body").append(formObj);
    formObj.submit();
    });
    // $("#ay").keyup(function(e){
    // });
    }
    第3行到第36行主要是弹窗的HTML代码。
    37,38行使用了js中常用的最简单的在页面中动态修改前台的方法。
    第39行和第46行均为对新增代码的动作处理，用于提交条件和子条件。
    在第46行的函数里面，做了对字符串的拼接处理。
    在第88行到第96行，实现了通过隐藏表单提交查询条件的js+html调用。
    jquery js实现高级条件检索功能中检索条件切换
    基本思路：
    1.HTML：
    使用table展示所有检索条件，使用input控件展示每一个检索条件，定义两种CSS类样式，用以区分检索条件的选中与未选中状态
    2.JS实现：
    为未选中的input绑定点击事件，可通过绑定未选中的样式类来实现，代码实现
    function (event) {//event为点击事件
    $(event.target).parent().find( '.条件input-selected' ).toggleClass('条件input-selected' ).toggleClass( '条件input-default');
    $(event.target).toggleClass( '条件input-selected' ).toggleClass('条件input-default' );
    },
    此时就实现了所有检索条件的自动切换
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/13 6:48:18