如何改进搜索框中的提前输入建议

Question

我是前端开发新手。我已经在我们旧的遗留 .net 应用程序之一中实现了搜索框。它工作正常，但需要改进。我的搜索结果基本上是return'a href'标签。因此用户可以直接单击它并完成他们的工作。

问题：

只要用户滚动浏览结果列表，他们就会在列表中看到实际的 'a href' 标签。
只有搜索结果的文本部分是可点击的，而不是整个突出显示的区域。
不知何故 'Enter' 无法正常工作。

例如：

如果我输入“测试报告”，它会显示正确的建议，但我可以在向下滚动时看到标签。

我要找的是：

我不想在向下滚动结果时看到 'a href' 标记，而只希望看到其中的文本值。同时，我需要保留那些用于点击它的标签，因为它会相应地将我重定向到所需的结果页面。

例如： 在上面的例子中我想在文本框中看到 'Test Report PSC' 但同时 'Test Report PSC' 应该是可点击的。

当我按下回车键时，它的行为应该与鼠标单击时相同。
我还希望整个区域都可以点击，而不仅仅是结果的文本部分。

请指出正确的方向，谢谢。

代码： HTML 文件

<div class="app-header-icons pull-right">
   <div class="app-header-icon app-search-icon">
      <div class="app-header-search-container">
           <label for="search" class="sr-only">Search</label>
           <input class="typeahead form-control"  id="search" type="search" autocomplete="off" placeholder="Start Searching..."/>
       </div>
       <i class="tem tem-search"></i>
    </div>
</div>

JS文件

 $(document).ready(function () {      

    var substringMatcher = function (reportNames) {
        return function findMatches(inputString, callbackFunc) {
            var matches = [];
            var substrRegex = new RegExp(inputString, "i");
            $.each(reportNames, function (i, reportName) {
                if (substrRegex.test(reportName)) {
                    matches.push({ value: reportName });
                }
            });
            callbackFunc(matches);
        };
    };

    //reportNames is an array
    // reportName[0] = <a href="blah" title="blah"> Actual Value </a>
    var reportNames = getReportSearchLists(); 

    $("#search").typeahead({
        hint: true,
        highlight: true,
        minLength: 3,
        order: "asc"
    },
    {
        name: "reportNames",
        displayKey: "value",
        source: substringMatcher(reportNames)
    }).bind('typeahead:selected', function (obj, datum) {
        $('.typeahead').typeahead('val', '');
    });});

Answer 1

预输入将准确显示您提供的值。在这种情况下，因为值是 <a href="blah" title="blah"> Actual Value </a>，这正是您将在建议列表中看到的值。

我不知道您是否能够获得您所追求的所有行为，但这应该为您指明了正确的方向。

将getReportSearchLists()修改为return对象而不是字符串，如：

[
  { "title":"My Report","url":"/my/url/to/report" },
  { "title":"Other Report","url":"/my/url/to/report" },
  { "title":"Something Report","url":"/my/url/to/report" }
]

将 substringMatcher 更新为 return 个对象：

var substringMatcher = function (reportNames) {
    return function findMatches(inputString, callbackFunc) {
        var matches = [];
        var substrRegex = new RegExp(inputString, "i");
        $.each(reportNames, function (i, obj) {
            if (substrRegex.test(obj.title)) {
                matches.push(obj);
            }
        });
        callbackFunc(matches);
    };
};

使用模板显示建议：

$('.typeahead').typeahead({
  highlight: true
}, {
  name: 'reports',
  display: 'title',
  source: substringMatcher(reportNames),
  templates: {
    empty: [
      '<div><strong>No match found</strong></div>'
    ].join('\n'),
    suggestion: '<div class="card"><a href="' + obj.url + '"><strong>' + obj.title + '</strong></a></div>')
  }
});

如何改进搜索框中的提前输入建议

How to improve typeahead suggestions in search box

search-box

twitter-bootstrap

typeahead.js