【问题标题】：how to do autocomplete search in <ul> element如何在 <ul> 元素中进行自动完成搜索
【发布时间】：2018-12-22 18:59:15
【问题描述】：
我需要 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>
【问题讨论】：
标签：
javascript
jquery
search
autocomplete
【解决方案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>