Question

我是前端开发的新手。我在我们的旧版.net应用程序中实现了搜索框。它工作正常，但需要改进。我的搜索结果基本上会返回＆＃39; a href＆＃39; 标记。因此，用户可以直接点击它并开展工作。

问题：

每当用户滚动浏览结果列表时，他们会在列表中看到实际的＆＃39; 标记。
只有搜索结果的文本部分是可点击的，但不是整个突出显示的区域。
某种程度上＆＃39;输入＆＃39; 无效。

例如：

如果我输入＆＃39; 测试报告＆＃39;它向我展示了正确的建议，但我可以在向下滚动时看到标记。

我在寻找什么：

我不想在向下滚动结果时看到＆＃39; 标记，但只有文本值在其中。同时我需要保留这些标签以便点击它，因为它会相应地将我重定向到所需的结果页面。

例如：在上述情况下，我想查看“测试报告PSC＆＃39;在文本框中，但同时＆＃39;测试报告PSC＆＃39;应该是可点击的。

当我点击输入时，它的行为应与鼠标点击相同。
此外，我希望整个区域都可以点击，而不仅仅是结果的文本部分。

请在这里指出正确的方向，谢谢。

代码： 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()以返回对象而不是字符串，例如：

[
  { "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以返回对象：

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>')
  }
});

如何在搜索框中改进预先建议

1 个答案: