我目前正在尝试构建一个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>
上面是我的搜索框的源代码。
实现这一目标的最佳方法是什么?我陷入困境,不太确定接下来应该做些什么。