如何使用输入进行自动完成搜索？

Question

我需要 jquery 或 javascript 来执行自动完成下拉列表，其中包含我的搜索输入结果。我需要将结果作为链接“”，以便我可以在新选项卡中打开它或通过单击它直接打开它。 这是我的代码：

<input type="text" id="searchinput" 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="example.com"><span class="childtitle">brand one</span></a></li>
          <li><a href="example.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="example.com"><span class="childtitle">Car BMW</span></a></li>
          <li><a href="example.com"><span class="childtitle">Car Toyota</span></a></li>
          <li><a href="example.com"><span class="childtitle">Car Opel</span></a></li>
          <li><a href="example.com"><span class="childtitle">Car Kia</span></a></li>
       </ul>
    </li>
</ul>

Answer 1

纯 JavaScript 的可能解决方案。

• 再次创建与输入匹配的标签数组
• 为输入字段设置input事件监听器
• 在每个input事件上，清除列表元素的内容并基于一些匹配函数，动态创建一个新的，添加 每个匹配字符串的链接

// array of values to match against
const tags = ['bmw', 'toyota', 'opel', 'kia'];

// fetch input and list elements
const input = document.querySelector('input');
const list = document.querySelector('ul');

// simple match function, performs substing matching
const getMatch = (toMatch, tags) =>
  tags.filter((tag) => tag.includes(toMatch.toLowerCase()));

input.addEventListener('input', (event) => {
  // clear contents of list
  list.innerHTML = '';

  // start matching only when input field is non-empty
  if (input.value !== '') {
    // call matching function and create a link for each
    // item returned by it
    getMatch(input.value, tags).forEach((match) => {
      const item = document.createElement('li');
      list.append(item);

      const link = document.createElement('a');
      item.append(link);

      // add href attribute and text dynamically
      link.setAttribute('href', `www.example.com/${match}`);
      link.textContent = match;
    });
  }
});

Search: <input type="text">
<ul></ul>

Answer 2

我在这里找到了@MatusDubrava 脚本和其他一些帮助的解决方案..

$(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) {
                                    /* On select, show item's label in text input */
                                    event.preventDefault();
                                    $("#txt_MenuSearch").val(target.item.label);
                                    var link = target.item.value;
                                    window.open(link);
                                },
                            });
                            /* Highlight text */
                            $("#txt_MenuSearch").data("ui-autocomplete")._renderItem = function (ul, item) {
                                var newText = String(item.label).replace(
                                    new RegExp(this.term, "gi"),
                                    "<span style='color:#DDBA15'>$&</span>");

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

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

<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="example.com"><span class="childtitle">brand one</span></a></li>
          <li><a href="example.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="example.com"><span class="childtitle">Car BMW</span></a></li>
          <li><a href="example.com"><span class="childtitle">Car Toyota</span></a></li>
          <li><a href="example.com"><span class="childtitle">Car Opel</span></a></li>
          <li><a href="example.com"><span class="childtitle">Car Kia</span></a></li>
       </ul>
    </li>
</ul>