如何实现子字符串搜索功能?

时间:2018-06-06 17:26:00

标签: javascript typescript substring lunrjs

我目前正在尝试构建一个cli,基本上会使用README,假设您有一个当然,并将其转换为网站。我希望拥有搜索功能并使用lunrjs来实现它。我正在使用TypeScript来构建我的应用程序。

简而言之,我的搜索功能如下:

function search(query) {
    // Find the item in our index corresponding to the lunr one to have more info
    return lunrIndex.search(query).map(function(result) {
            return pagesIndex.filter(function(page) {
                return page.uri === result.ref;
            })[0];
        });
}

对于我的搜索功能,用户首先要做的是在搜索中键入一个术语。在几个字符后面会出现一个下拉列表,其中包含可能与该术语相关的任何单词。我使用lunrjs自动完成功能来帮助解决此问题。

用户从该项目中选择一个列表后,会将其重定向到引用从列表中选择的项目的页面。

我想要做的是在自动完成的顶部实现子字符串功能。您可以看到某个搜索查询在选项下拉列表中是否有3个项目,用户可以非常方便地选择一个并重定向到所述页面。

另一方面,如果选项的下拉列表中有12个项目,那么它并不能提供出色的用户体验。记住这个例子,输入几个字符并按Enter后,我希望将用户重定向到新页面,其中下拉列表选项中的每个项目都显示在Google搜索结果中喜欢的方式。

<div class="searchbox">
    <label for="search-by"><i class="fa fa-search"></i></label>
    <input data-search-input id="search-by" type="text" placeholder="{{T "Search-placeholder"}}">
    <span data-search-clear=""><i class="fa fa-close"></i></span>
</div>
{{ $assetBusting := not .Site.Params.disableAssetsBusting }}
<script type="text/javascript" src="{{"js/lunr.min.js" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}"></script>
<script type="text/javascript" src="{{"js/auto-complete.js" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}"></script>
<script type="text/javascript">
    {{ if .Site.IsMultiLingual }}
        var baseurl = "{{.Site.LanguagePrefix | relURL }}";
    {{ else }}
        var baseurl = '{{ "" | relURL }}';
    {{ end }}
</script>
<script type="text/javascript" src="{{"js/search.js" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}"></script>

上面是我的搜索框的源代码。

实现这一目标的最佳方法是什么?我陷入困境,不太确定接下来应该做些什么。

0 个答案:

没有答案