javascript - 如何使用自动完成搜索jquery在新选项卡中打开结果？

Question

下面是在我的菜单页面中搜索的代码，它工作正常，但缺少一些选项..如果您可以提供帮助:

1-我需要用特殊颜色突出显示我正在输入的与搜索结果匹配的字母。2-需要允许通过鼠标右键单击打开结果，并在新选项卡中将其作为链接打开。3-当单击结果时，我需要获取结果名称，而不是搜索文本输入中它自己的链接。

这是我的代码:

$(function () {
            var menuPages = $('#main-menu li a:has(.childtitle)').map(function () {
                return {
                    label: $(this).text(),
                    value: $(this).attr('href')
                };
            }).toArray();
            $("#txt_MenuSearch").autocomplete({
                source: menuPages,
                select: function (event, target) {
                    var link = target.item.value;
                    window.open(link);
                }
            });
        });

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" id="txt_MenuSearch" class="search-input" placeholder="Search here.." />

    <ul id="main-menu">   
        <li class="has-sub"><a href="javascript:;"><span class="title">Menu Header1</span></a>
           <ul>
              <li><a href="yahoo.com"><span class="childtitle">brand one</span></a></li>
              <li><a href="gmail.com"><span class="childtitle">brand two</span></a></li>
           </ul>	
    	</li>
    
        <li class="has-sub"><a href="javascript:;"><span class="title">Menu Header2</span></a>
           <ul>
              <li><a href="bmw.com"><span class="childtitle">Car BMW</span></a></li>
              <li><a href="toyota.com"><span class="childtitle">Car Toyota</span></a></li>
              <li><a href="opel.com"><span class="childtitle">Car Opel</span></a></li>
              <li><a href="kia.com"><span class="childtitle">Car Kia</span></a></li>
           </ul>
    	</li>
    </ul>

Answer 1

1 - 为了突出显示，请使用正则表达式替换自动完成的 _renderItem API 函数中所有显示的列表项的匹配文本。

2 - 要右键单击并显示上下文菜单，只需用 anchor 标记包裹每个匹配项即可。

3 - 要在搜索字段中注入(inject)标签文本而不是链接/值，请更新“搜索”和“焦点”事件，以便它们将搜索输入的值设置为标签文本而不是值。

这是一个示例:

var menuPages = $('#main-menu li a:has(.childtitle)').map(function () {
                return {
                    label: $(this).text(),
                    value: $(this).attr('href')
                };
            }).toArray();
            $("#txt_MenuSearch").autocomplete({
                source: menuPages,
                select: function (event, target) {
                    /* On select, show item's label in text input */
                    event.preventDefault();
                    $("#txt_MenuSearch").val(target.item.label); 
                },
                focus: function(event, ui) {
                    /* On focus, show item's label in text input */
                    event.preventDefault();
                    $("#txt_MenuSearch").val(ui.item.label);
                }
            });

            /* Highlight text and handling right-clicking context menu */
            $("#txt_MenuSearch").data("ui-autocomplete")._renderItem = function (ul, item) {

                var newText = String(item.label).replace(
                                new RegExp(this.term, "gi"),
                                "<span class='ui-state-highlight'>$&</span>");

                /* Wrapping the matching option within anchor tags */
                newText = '<a href="'+item.value+'">'+newText+'</a>';

                return $( "<li>" )
                .attr( "data-value", item.value )
                .append( newText )
                .appendTo( ul );
            };