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

php中文网

发布时间：2016-05-16 15:12:34

3259人浏览过

来源于php中文网

原创

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

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



 
//省略部分调用关系
this.highSearch = function () {
document.getElementById('highSearchObj').disabled=true; 
var highSearchHtml = ' \
包含关键词 \
不包含关键词\
检索范围\
\
\
\
\
\
\
-\
案由\
法院\
\
\
\
';
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="@("+st+")("+kywds+"-"+nokywds+")";
$("#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 = [''];
html.push('');
html.push('');
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实现高级条件检索功能中检索条件切换

基本思路：

Sesame AI

一款开创性的语音AI伴侣，具备先进的自然对话能力和独特个性。

下载

1.HTML：

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

立即学习“Java免费学习笔记（深入）”；

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' );
},

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

javascriptAJAX是什么_如何使用fetch发送请求【教程】

Firestore 文档检索性能对比：直接通过 ID 获取 vs 使用查询条件

Firestore 文档检索性能对比：按 ID 直接获取 vs. 字段查询

Firestore 文档检索性能对比：直接通过 ID 获取 vs 查询字段匹配

如何在 Angular 16 中安全访问模型中数组属性的单个元素