Twitter bootstrap 如何改进搜索框中的提前键入建议

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

问题：

• 每当用户在结果列表中滚动时，他们都会在列表中看到实际的“a href”标记
• 只有搜索结果的文本部分可单击，但不能单击整个突出显示区域
• 不知何故，“回车”不起作用

例如：

若我键入“测试报告”，它会显示正确的建议，但我可以在向下滚动时看到标记

我在寻找什么：

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

例如：在上述情况下，我希望在文本框中看到“测试报告PSC”，但同时应可单击“测试报告PSC”

• 当我按enter键时，它的行为应该与鼠标单击的行为相同
• 此外，我希望整个区域可点击，而不仅仅是结果的文本部分

请给我指出正确的方向，谢谢

代码： 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', '');
    });});

$（文档）.ready（函数（）{
var substringMatcher=函数（reportNames）{
返回函数findMatches（inputString、callbackFunc）{
var匹配=[]；
var SUBSTREGEX=新的RegExp（输入字符串，“i”）；
$.each（报告名、函数（i、报告名）{
if（子关系测试（报告名称））{
匹配.push（{value:reportName}）；
}
});
callbackFunc（匹配项）；
};
};
//reportNames是一个数组
//报表名称[0]=
var reportNames=getReportSearchLists（）；
$（“#搜索”）.typeahead({
提示：没错，
推荐理由：没错，
最小长度：3，
命令：“asc”
},
{
名称：“报告名称”，
显示键：“值”，
来源：子字符串匹配器（reportNames）
}).bind（'typeahead:selected'，函数（对象，基准）{
$（'.typeahead'）.typeahead（'val'，''）；
});});

typeahead将准确显示您给它的值。在本例中，由于值为

，因此这正是您将在建议列表中看到的内容

我不知道你是否能得到你想要的所有行为，但这应该为你指明正确的方向

修改

getReportSearchList（）

以返回对象而不是字符串，例如：

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

$（'.typeahead'）。typeahead({
推荐理由：没错
}, {
名称：'报告'，
显示：“标题”，
来源：子字符串匹配器（reportNames），
模板：{
空的：[
“未找到匹配项”
].join（'\n'），
建议：''）
}
});

reportNames的价值是什么？@whipdancer我修改了我的问题，以显示reportNames中有什么内容我尝试了这个解决方案，效果不错。但是现在它在向下滚动搜索结果时不会在搜索框中显示任何文本。我相信滚动建议列表不会在输入框中输入值，您仍然需要选择一些内容。您还可以修改建议html以查看可能产生的效果。如果您给定的解决方案是正确的，不知何故，我忘记了将displayKey属性更改为'title'（displayKey:'title'，）