WEB 编程作业一：网站搭建（三）

实现分项全文搜索

在搜索框中输入关键字后，触发SearchForKeyword()函数

<div class="search bar2">
    <input type="text" name="keyword" id="SearchText" placeholder="请输入要搜索的关键字">
    <input type="button" value="搜索" onclick="SearchForKeyword()">
</div>

SearchForKeyword()函数写在server.js里，是不存在搜索内容的新闻行被隐藏

$("body").append(`
        <script type="text/javascript">
        SearchForAuthor = function () {
            const totNews = ${cnt};
            let key = document.getElementById("SearchAuthor").value.split(" ");
        
            for(let i = 0; i < totNews; ++i) {
                document.getElementById(\`line\${i}\`).hidden = false;
                let tmpStr = document.getElementById(\`a\${i}\`).innerHTML;
                for(let j in key) {
                    if(tmpStr.search(key[j]) == -1) {
                        document.getElementById(\`line\${i}\`).hidden = true;
                    }
                }
            }
        }
        </script>
        `);

由表格头的信息知，关键词搜索的是title和content

<tr id="line${x}">
    <td>${x}</td>
    <td><a href="${sqlfetch.url}" id="t${x}">${sqlfetch.title}</a></td>
    <td id="c${x}">${sqlfetch.content}</td>
    <td id="a${x}">${sqlfetch.author}</td>
    <td id="s${x}">${sqlfetch.source_name}</td>
    <td>${sqlfetch.publish_date}</td>
    <td>${sqlfetch.crawltime}</td>
    <td id="k${x}">${sqlfetch.keywords}</td>
    <td id="d${x}">${sqlfetch.description}</td>
</tr>

要实现分项搜索，让作者和来源使用同样的方式被搜索即可。

用`a${i}`或`s${i}`替换原代码中的`c${i}`

由于关键词和简介这两项与文章内容有高度的重复性，不为它们设置单独的搜索。

最后的展示页面是：

在作者搜索栏输入"张雪", 可以看到只剩一篇文章呈现在页面中。