我必须添加搜索和过滤功能。页面中有一个搜索框。当用户在框中输入搜索词时,将使用此搜索词过滤位置列表,以便仅显示标题中包含此词的那些作业。如果输入多个单词(以空格分隔),则显示显示任一单词的作业(即搜索术语之间的隐式OR)。 我有一个position.json文件,我用它来生成最新的10个位置,通过点击获取它们的全部细节并在其中添加一个申请表格。现在我不知道如何进行搜索和过滤。我只想假装使用jQuery和handlebar库。
我目前有这个代码,删除了getJson,因为我似乎无法正确合并它。如果我使用它,我生成的上一个最新的10个列表也会消失。现在,你在javascript中遇到了破碎的代码。
var searchField = $(this).val();
if(searchField === '') {
$('#filter-records').html('');
return;
}
var regex = new RegExp(searchField, "i");
var output = '<div class="row">';
var count = 1;
$.each(data, function(key, val){
if ((val.title.search(regex) != -1) ||
(val.title.search(regex) != -1)) {
output += '<div class== val.title +'" /></div>';
output += '</div>';
$('#filter-records').html(output);
});
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jobs!</title>
<link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
<h1>Jobs!</h1>
<div class = "container" style = "width:900px;">
<h2 align ="center"> Search for a Job </h2>
<br /> <br />
<div align = "center">
<input type = "text" name = "search" placeholder="Search" class =
"filter-records" />
</div>
<ul class="list-group" id="result"></ul>
<br />
</div>
<p> Available Jobs</p>
<ul id="jobs">
</ul>
<aside>
<div id="fulldetails">
</div>
</aside>
<!-- load javascript libraries -->
<script src="/static/js/jquery-3.3.1.min.js"></script>
<script src="/static/js/handlebars.min.js"></script>
<!-- load project javascript -->
<!-- note that you can add more modules if you wish -->
<script src="/static/js/model.js"></script>
<script src="/static/js/script.js"></script>
</body>
</html>
答案 0 :(得分:0)
以下是对此应如何运作的模糊概述。不记得使用Jquery获取文件内容是否异常,如果是,则必须嵌套。一般的想法很简单,但你必须付出一些努力(谷歌/ Stack Overflow)来弄清楚其余部分。但是,将它们全部按步骤布局应该会有所帮助。一次只关注一件事。
如果您遇到困难,请使用此功能:https://oscarotero.com/jquery/
这是jquery的备忘单
首先,从jquery读取文件。有很多资源。
第二步,再次使用jquery应该非常直接。获取搜索内容
第三步是最简单的,过滤您的匹配结果。
最后一步,使用把手。我会在评论
中发布我之前做过的手柄栏项目的链接
function GenerateSearchHashMap(string searchText)
{
let hash = {};
searchText.split(' ').forEach(pos => hash[pos] = true);
return hash;
}
function FilterMatchingPositions(arraryOfPositions, matchingHash)
{
return arrayOfPositions.filter(pos => matchingHash[pos]);
}
function ExecuteSearch()
{
//Use Some J Query to get your positions
let positions = GetPositionsFromJQuery();
//Get search bar text
let searchText = GetSearchText();
let searchHash = GenerateSearchHashMap(searchText);
let results = FilterMatchingPositions(positions, searchHash);
HandleBarsDoesSomeStuff(results);
}