lunr.js实现一个全文索引搜索效果代码

代码语言:html

所属分类:搜索

代码描述:lunr.js实现一个全文索引搜索效果代码

代码标签: lunr.js 全文索引 搜索

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/material.indigo-pink.min.css">

    <style>
        li {
          display: none;
          margin: 23px 0;
        }
        
        li a {
            color: #3CA8FF;
            text-decoration: initial;
        }
        li a:hover {
            text-decoration: underline;
        }
        
        .show {
          display: block;
        }
        
        h2,
        h3 {
          margin: 0px 0;
          line-height: 23px;
          font-size: 18px;
        }
        
        div#wrap {
          margin: 17px;
        }
        
        ul,
        ol {
          padding: 0;
        }
    </style>




</head>

<body>
    <div id="wrap">
        <header>
            <h1>Lunr.js 示例代码</h1><a href="http://lunrjs.com/">visit lunrjs.com</a>
        </header>

        <article>

            <p>输入以下文本,例如: javascript, json or browser</p>
        </article>

        <div class="controls">
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                <input id="searchterm" class="mdl-textfield__input" type="text" />
                <label class="mdl-textfield__label" for="sample3">Search...</label>
            </div>
            <a class="all" href="#">Show All</a>
        </div>

        <div class="questions">
            <div id="question-list-container">
                <div>
                    <ul>
                        <li data-question-id="6414827">
                            <h2><a href="#">Checkbox returns the wrong state?</a></h2>
                            <p>javascript jquery html</p>
                        </li>
                        <li data-question-id="6414614">
                            <h2><a href="#">Fairly easy JQuery Input Selection location problem</a></h2>
                            <p>php javascript jquery html div</p>
                        </li>
                        <li data-question-id="6296451">
                            <h2><a href="#">problem in file upload</a></h2>
                            <p>javascript jquery html file-upload</p>
                        </li>
                        <li data-question-id="6414782">
                            <h2><a href="#">Provide link/Redirect after a 'Like' or 'Share' on Facebook or a 'Share' on Twitter</a></h2>
                            <p>php javascript facebook twitter share</p>
                        </li>
                        <li data-question-id="6412607">
                            <h2><a href="#">Passing argument to function. What's wrong?</a></h2>
                            <p>javascript jquery</p>
                        </li>
                        <li data-question-id="6414755">
                 .........完整代码请登录后点击上方下载按钮下载查看

网友评论0