如何使用自动完成搜索 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 - 对于右键单击并显示上下文菜单，只需用锚标记包装每个匹配项。

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

这是一个示例：

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