当前页面上的自定义搜索
Custom Search on Current Page
简单的问题,我想在PIECES PAGES上查询结果。就像我使用 Express + NodeJS + MongoDB + Mongoose 所做的一样:
// GET /api/question/:id
router.get('/question/:id' , (req , res)=>{
var id = req.params.id;
if(!ObjectID.isValid(id))
{
return res.status(400).send();
}
Question.findById(id).then((question) => {
if(!question){
return res.status(400).send();
}
res.send(question);
}).catch((err) => {
res.status(400).send(err);
});
});
Those codes are returning params of :id to search related _id (GET Method)
然后,我使用浏览器端使用 ajax 获取查询:
function getQueryLink(q){
return $.ajax({
method: "GET",
url: '/api/question/?q=' + encodeURIComponent(q),
contentType: 'application/json',
success: function (response) {
var getListBlock = $("#questionsBlock");
$("#questionsBlock").empty();
response.question.docs.forEach(function (questions) {
var id = questions._id;
getListBlock.append("<form id='" + id + "' class='questionBox'><input type='number' name='time' id='timeLittleBox' value='" + questions.time + "' onfocus='this.value=\"\"'><p style='font-size: 17px;color: #535353; display: inline-block; float:right; padding:3px;'>seconds</p><textarea class='list'>" + questions.questionString + "</textarea><input type='number' class='answer-box-edit' style='background-color: #eaad3a' id='trueAnswerBox' value='" + questions.answers[0] + "'><input type='number' class='answer-box-edit' id='falseAnswerBox1' value='" + questions.answers[1] + "'><input type='number' class='answer-box-edit' id='falseAnswerBox2' value='" + questions.answers[2] + "'><input type='number' class='answer-box-edit' id='falseAnswerBox3' value='" + questions.answers[3] + "'><div class='form-group'><label for='level' id='timeBoxLabelEdit'>Level of Question = <output class='rangeValue' id='rangevalue'>" + questions.level + "</output></div></label><input type='range' id='level' min='1' max='10' value='" + questions.level + "' oninput='rangevalue.value=value' onchange='rangevalue.value=value' /><br><button form='" + id + "' class='delete'>Delete</button><button form='" + id + "' class='update'>Update</button></form><hr>");
});
if (response.question.total >= 6) {
getListBlock.last().append("<div id='pagination' class='pagination'><a class='left-arrow' href='/'>❮ Previous</a><a class='right-arrow' href='/'>Next ❯</a></div>");
}
if (response.question.page == 1) {
$(".left-arrow").addClass("disabled");
} else if (response.question.page == response.question.pages) {
$(".right-arrow").addClass("disabled");
}
$("a.left-arrow").on("click", function (e) {
e.preventDefault();
paginationLeft(response.question.pages, response.question.page);
});
$("a.right-arrow").on("click", function (e) {
e.preventDefault();
paginationRight(response.question.pages, response.question.page);
});
$('.questionBox').on('click', '.update', function (e) {
e.preventDefault();
var id = $(this).attr('form');
var questionString = $("form#" + id).find("textarea").val();
var answer1 = $("form#" + id).find("#trueAnswerBox").val();
var answer2 = $("form#" + id).find("#falseAnswerBox1").val();
var answer3 = $("form#" + id).find("#falseAnswerBox2").val();
var answer4 = $("form#" + id).find("#falseAnswerBox3").val();
var level = $("form#" + id).find("#level").val();
var time = $("form#" + id).find("#timeLittleBox").val();
var allAnswers = [answer1, answer2, answer3, answer4];
update(id, questionString, allAnswers, level ,time , q);
});
$('.questionBox').on('click', '.delete', function (e) {
e.preventDefault();
var id = $(this).attr('form');
var questionString = $("form#" + id).find("textarea").val();
deleteData(id, questionString , q);
});
}
});
}
现在,在 Apostrophe-CMS 中,我不知道从哪里开始。甚至获取参数并将结果发送回 API 并且能够使用 nunjucks 以相同的 req.data
或 req.piecesFilters
显示。让我举一个简单的例子,说明我目前正在为自己的作品集做些什么。这是我为 portfolio-pages : {}
Finished Development in Github 设计的:
如您所见,我在设计中有 'Search' 表单。但我只想在投资组合中搜索(仅查询投资组合)。请帮我 。我在 self.indexPage 上研究了你的代码。但是仍然不知道如何 return 只查询那个页面。然后我找到了 addFilter 方法,它在某种程度上对每个不同页面上的自定义搜索很有用。帮帮我:'(
And also , I want to search with Powerful regex . If let say I typed 'Blue' And also return 'Bluebird' . This would make powerful search query !
找到答案
事实证明,我必须在 app.js 中启用撇号搜索。并在 /portfolio
之类的投资组合页面中制作 表单操作 。并将我的输入名称设为 search
以便整体 URL 为 localhost:3000/portfolio?search=some+search
。现在它 returns 的所有价值都很棒!这是我在 indexAjax.html 中的表格:
<form method="GET" id="portfolio-list" action="/portfolio">
<input type="text" name="search" placeholder="Search" data-search="on" /><input type="submit" value="Search" style="display:none" />
</form>
我的浏览器序列化数据(以防万一):
$("#portfolio-list").submit(function(){
$.get('/portfolio', $("#portfolio-list").serialize(), function (result) {
if(result.status === 'ok'){
console.log("Form sent");
}
});
});
简单的问题,我想在PIECES PAGES上查询结果。就像我使用 Express + NodeJS + MongoDB + Mongoose 所做的一样:
// GET /api/question/:id
router.get('/question/:id' , (req , res)=>{
var id = req.params.id;
if(!ObjectID.isValid(id))
{
return res.status(400).send();
}
Question.findById(id).then((question) => {
if(!question){
return res.status(400).send();
}
res.send(question);
}).catch((err) => {
res.status(400).send(err);
});
});
Those codes are returning params of :id to search related _id (GET Method)
然后,我使用浏览器端使用 ajax 获取查询:
function getQueryLink(q){
return $.ajax({
method: "GET",
url: '/api/question/?q=' + encodeURIComponent(q),
contentType: 'application/json',
success: function (response) {
var getListBlock = $("#questionsBlock");
$("#questionsBlock").empty();
response.question.docs.forEach(function (questions) {
var id = questions._id;
getListBlock.append("<form id='" + id + "' class='questionBox'><input type='number' name='time' id='timeLittleBox' value='" + questions.time + "' onfocus='this.value=\"\"'><p style='font-size: 17px;color: #535353; display: inline-block; float:right; padding:3px;'>seconds</p><textarea class='list'>" + questions.questionString + "</textarea><input type='number' class='answer-box-edit' style='background-color: #eaad3a' id='trueAnswerBox' value='" + questions.answers[0] + "'><input type='number' class='answer-box-edit' id='falseAnswerBox1' value='" + questions.answers[1] + "'><input type='number' class='answer-box-edit' id='falseAnswerBox2' value='" + questions.answers[2] + "'><input type='number' class='answer-box-edit' id='falseAnswerBox3' value='" + questions.answers[3] + "'><div class='form-group'><label for='level' id='timeBoxLabelEdit'>Level of Question = <output class='rangeValue' id='rangevalue'>" + questions.level + "</output></div></label><input type='range' id='level' min='1' max='10' value='" + questions.level + "' oninput='rangevalue.value=value' onchange='rangevalue.value=value' /><br><button form='" + id + "' class='delete'>Delete</button><button form='" + id + "' class='update'>Update</button></form><hr>");
});
if (response.question.total >= 6) {
getListBlock.last().append("<div id='pagination' class='pagination'><a class='left-arrow' href='/'>❮ Previous</a><a class='right-arrow' href='/'>Next ❯</a></div>");
}
if (response.question.page == 1) {
$(".left-arrow").addClass("disabled");
} else if (response.question.page == response.question.pages) {
$(".right-arrow").addClass("disabled");
}
$("a.left-arrow").on("click", function (e) {
e.preventDefault();
paginationLeft(response.question.pages, response.question.page);
});
$("a.right-arrow").on("click", function (e) {
e.preventDefault();
paginationRight(response.question.pages, response.question.page);
});
$('.questionBox').on('click', '.update', function (e) {
e.preventDefault();
var id = $(this).attr('form');
var questionString = $("form#" + id).find("textarea").val();
var answer1 = $("form#" + id).find("#trueAnswerBox").val();
var answer2 = $("form#" + id).find("#falseAnswerBox1").val();
var answer3 = $("form#" + id).find("#falseAnswerBox2").val();
var answer4 = $("form#" + id).find("#falseAnswerBox3").val();
var level = $("form#" + id).find("#level").val();
var time = $("form#" + id).find("#timeLittleBox").val();
var allAnswers = [answer1, answer2, answer3, answer4];
update(id, questionString, allAnswers, level ,time , q);
});
$('.questionBox').on('click', '.delete', function (e) {
e.preventDefault();
var id = $(this).attr('form');
var questionString = $("form#" + id).find("textarea").val();
deleteData(id, questionString , q);
});
}
});
}
现在,在 Apostrophe-CMS 中,我不知道从哪里开始。甚至获取参数并将结果发送回 API 并且能够使用 nunjucks 以相同的 req.data
或 req.piecesFilters
显示。让我举一个简单的例子,说明我目前正在为自己的作品集做些什么。这是我为 portfolio-pages : {}
Finished Development in Github 设计的:
如您所见,我在设计中有 'Search' 表单。但我只想在投资组合中搜索(仅查询投资组合)。请帮我 。我在 self.indexPage 上研究了你的代码。但是仍然不知道如何 return 只查询那个页面。然后我找到了 addFilter 方法,它在某种程度上对每个不同页面上的自定义搜索很有用。帮帮我:'(
And also , I want to search with Powerful regex . If let say I typed 'Blue' And also return 'Bluebird' . This would make powerful search query !
找到答案
事实证明,我必须在 app.js 中启用撇号搜索。并在 /portfolio
之类的投资组合页面中制作 表单操作 。并将我的输入名称设为 search
以便整体 URL 为 localhost:3000/portfolio?search=some+search
。现在它 returns 的所有价值都很棒!这是我在 indexAjax.html 中的表格:
<form method="GET" id="portfolio-list" action="/portfolio">
<input type="text" name="search" placeholder="Search" data-search="on" /><input type="submit" value="Search" style="display:none" />
</form>
我的浏览器序列化数据(以防万一):
$("#portfolio-list").submit(function(){
$.get('/portfolio', $("#portfolio-list").serialize(), function (result) {
if(result.status === 'ok'){
console.log("Form sent");
}
});
});