Question

我需要jquery或javascript用搜索类型的结果来完成自动完成下拉列表。我需要将结果作为链接“”，以便我可以在新标签中打开它，也可以通过单击直接打开它。这是我的代码：

<input type="text" id="searchinput" class="search-input" placeholder="ابحث هنـــا.." />

<ul id="main-menu">   
    <li class="has-sub"><a href="javascript:;"><i class="entypo-gauge"></i><span class="title"> الملاك و الوحدات</span></a>
       <ul>
          <li><a href="#"><i class="entypo-list"></i><span class="childtitle"> إدارة بيانات الوحدات </span></a></li>
          <li><a href="#"><i class="entypo-list"></i><span class="childtitle"> محتويات وحدة </span></a></li>
       </ul>    
    </li>

    <li class="has-sub"><a href="javascript:;"><i class="entypo-gauge"></i><span class="title">نظام الفندقة والإيجارات</span></a>
       <ul>
          <li><a href="#"><i class="entypo-list"></i><span class="childtitle">الوحدات المؤجرة </span></a></li>
          <li><a href="#"><i class="entypo-list"></i><span class="childtitle">تأجير وحدة </span></a></li>
          <li><a href="#"><i class="entypo-list"></i><span class="childtitle"> المستأجرين </span></a></li>
          <li><a href="#"><i class="entypo-list"></i><span class="childtitle"> التعاقدات </span></a></li>
       </ul>
    </li>
</ul>

Answer 1

我在下面的一些帮助下找到了解决方案。

$(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="ابحث هنـــا.." />

<ul id="main-menu">   
    <li class="has-sub"><a href="javascript:;"><i class="entypo-gauge"></i><span class="title"> الملاك و الوحدات</span></a>
       <ul>
          <li><a href="#"><i class="entypo-list"></i><span class="childtitle"> إدارة بيانات الوحدات </span></a></li>
          <li><a href="#"><i class="entypo-list"></i><span class="childtitle"> محتويات وحدة </span></a></li>
       </ul>    
    </li>

    <li class="has-sub"><a href="javascript:;"><i class="entypo-gauge"></i><span class="title">نظام الفندقة والإيجارات</span></a>
       <ul>
          <li><a href="#"><i class="entypo-list"></i><span class="childtitle">الوحدات المؤجرة </span></a></li>
          <li><a href="#"><i class="entypo-list"></i><span class="childtitle">تأجير وحدة </span></a></li>
          <li><a href="#"><i class="entypo-list"></i><span class="childtitle"> المستأجرين </span></a></li>
          <li><a href="#"><i class="entypo-list"></i><span class="childtitle"> التعاقدات </span></a></li>
       </ul>
    </li>
</ul>

如何在<ul>元素中执行自动完成搜索

1 个答案: