如何使搜索栏中的结果列表可以通过向上/向下箭头进行导航

How to make the list of results from a search-bar navigatable via up/down arrows?

本文关键字：导航 搜索栏 结果 可以通过 列表 何使      更新时间：2023-09-26

我正在尝试实现一个显示数据库结果的搜索栏。我已经显示了结果，但我需要这样做，以便我可以使用向上/向下箭头导航结果。

下面给出了搜索栏的HTML结构：一个输入段和一个带有"结果列表"的div。在结果列表中，每个结果都有一个div，其中包括结果的属性。

我正在使用Ember.js.

{{!-- Contains the whole Searchbar.  --}}
<div class="searchbarContainer" tabindex="-1" bubbles=false>
    {{input type="search" name="searchFor" class="searchTextField" placeholder="Search..." value=searchKey}}
    <div class="searchResultsContainer box-shadow" {{bind-attr id="searchBarID"}}>
        {{#if searchKeyNotNull}}
                {{!-- For each Row, include visual elements. --}} 
                {{#each toSearch }}
                    <div class="resultRow" tabindex="-1"{{action 'didClickResultDefault' this}}>
                        <img {{bind-attr src="resultIcon" class=":resultIcon isRound:roundIcon"}}>
                        <div class="inline-block">
                            <div class="resultName">
                                {{unbound this.resultText}} 
                            </div><br>
                            <div class="resultTitle">
                                {{unbound this.secondaryText}} 
                            </div>
                      </div>
                    </div>
                {{/each}}
            {{/if}}
        {{/if}}
    </div>
</div>

为了澄清一些事情：现在的工作方式是searchKeyNotNull是控制器上的一个属性，用于检查输入是否为空（以避免不必要的数据库调用）。toSearch是在获取结果时填充的数组；在输入部分的每个字符条目上，都会进行查询并重新填充toSearch。

我还应该指出，如果输入框失去焦点，searchResultsContain将立即隐藏。搜索栏本身就是一个Ember组件，如果这有什么不同的话。

重点是，在这个阶段，我有一个结果数组，我正在向页面显示。每个结果都显示在div"resultRow"中；所有"resultRow"都在父div"searchResultsContain"中。目标是能够使用上下箭头浏览这些resultRows；点击回车应该类似于点击resultRow。

似乎世界上几乎每个搜索栏都可以使用键盘导航，但令人沮丧的是，我不明白如何实现甚至接近这样的功能。

这样一个有用的功能是如何实现的？

这个答案可能就是您想要的https://stackoverflow.com/a/10341608/1146562

创建一个服务器端脚本（PHP、Rails、ASP.net等）来生成搜索结果。脚本可以从任何您喜欢的地方获取数据，例如数据库或硬编码列表。您的脚本必须接受一个名为q的GET参数，该参数将包含要搜索的术语。例如。http://www.example.com/myscript?q=query

链接到插件和文档http://loopj.com/jquery-tokeninput/

*****************更新********************

这里有另一个答案，可以为你指明正确的方向https://stackoverflow.com/a/17810896/1146562

$("ul").keydown(function (e) {
    var searchbox = $(this);
    switch (e.which) {
        case 40:
            $('li:not(:last-child).selected').removeClass('selected').next().addClass('selected');
            break;
        case 38:
            $('li:not(:first-child).selected').removeClass('selected').prev().addClass('selected');
            break;
    }
});

希望能有所帮助！

相关文章：