从局部视图加载的 jQuery 自动完成结果
Posted
技术标签:
【中文标题】从局部视图加载的 jQuery 自动完成结果【英文标题】：jQuery AutoComplete Results loaded from partial view 【发布时间】：2020-11-21 07:19:29 【问题描述】：我已经搜索过，不幸的是没有找到答案。抱歉，如果这是重复的。可以从部分加载自动完成的结果吗？
$('#searchBox2').catcomplete(
delay: 0,
minLength: 1,
source: '/api/CheckOrders/Search?searchString=' + inputData,
select: function (event, ui)
).bind('focus', function ()
$(this).keydown();
);
我已经在类别等中正确显示了结果，但是我想要的样式被 UI 样式覆盖并且变得有点混乱。我想知道是否可以从部分加载结果，因为这可以让我更轻松地设置结果的样式。下面显示的是当前结果的显示方式，但 UI 样式会接管。
function LoadAutoComplete(inputData)
$.widget("custom.catcomplete", $.ui.autocomplete,
_create: function ()
this._super();
this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
,
_renderMenu: function (ul, items)
var that = this,
currentCategory = "";
$.each(items, function (index, item)
var li;
if (item.category != currentCategory)
ul.append("<div class='aa-suggestions-category' style='margin-top: 10px;padding-left: 5px;'>" + item.category);
currentCategory = item.category;
li = that._renderItemData(ul, item);
if (item.category)
li.attr("aria-label", item.category + " : " + item.label);
);
,
_renderItem: function (ul, item)
if (item.category === "Cancelled")
return $("</div><span class='aa-suggestions' style='display: block;'><div class='aa-suggestion'>")
.append("<span>" +
item.customerID + "</span><span>" +
item.customerName + "</span><span>" +
item.email + "</span></div></div>")
.appendTo(ul);
else
);
【问题讨论】：
请提供一个最小的、可重现的例子：***.com/help/minimal-reproducible-example @Twisty - JSFiddle 显示了一个简化的示例 link。问题是，是否可以从部分检索自动完成列表而不是由小部件呈现。谢谢 【参考方案1】：没有合适的例子，我使用了Demo：https://jqueryui.com/autocomplete/#categories
考虑以下内容。
$(function()
$.widget("custom.catcomplete", $.ui.autocomplete,
_create: function()
this._super();
this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
,
_renderMenu: function(ul, items)
var that = this,
currentCategory = "";
$.each(items, function(index, item)
var li;
if (item.category != currentCategory)
ul.append("<li class='ui-autocomplete-category aa-suggestions-category'>" + item.category + "</li>");
currentCategory = item.category;
li = that._renderItemData(ul, item);
if (item.category)
li.attr("aria-label", item.category + " : " + item.label);
);
,
_renderItem: function(ul, item)
return $("<li>")
.attr("data-value", item.value)
.append("<div class='aa-suggestion'><span>" +
item.customerID + "</span><span>" +
item.customerName + "</span><span>" +
item.email + "</span></div>")
.addClass("aa-suggestions")
.appendTo(ul);
);
var data = [
label: "anders",
category: "",
customerID: "01",
customerName: "anders",
email: "asmith@example.com"
,
label: "andreas",
category: "",
customerID: "02",
customerName: "andreas",
email: "andreas@example.com"
,
label: "antal",
category: "",
customerID: "03",
customerName: "antal",
email: "antal@example.com"
,
label: "annhhx10",
category: "Products",
customerID: "04",
customerName: "ann h",
email: "annh@example.com"
,
label: "annk K12",
category: "Products",
customerID: "05",
customerName: "ann k",
email: "annk@example.com"
,
label: "annttop C13",
category: "Products",
customerID: "06",
customerName: "ann top",
email: "annt@example.com"
,
label: "anders andersson",
category: "People",
customerID: "07",
customerName: "anders anderson",
email: "aanderson@example.com"
,
label: "andreas andersson",
category: "People",
customerID: "08",
customerName: "andreas andersson",
email: "aandersson@example.com"
,
label: "andreas johnson",
category: "People",
customerID: "09",
customerName: "andreas johnson",
email: "ajohnson@example.com"
];
$("#search").catcomplete(
delay: 0,
source: data
);
);.ui-autocomplete-category
font-weight: bold;
padding: .2em .4em;
margin: .8em 0 .2em;
line-height: 1.5;
.aa-suggestion span
padding-right: 7px;
.aa-suggestion span:nth-child(2)
width: 90px;
display: inline-block;
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
<label for="search">Search: </label><input id="search">这将继续使用ul 和li 作为菜单。如果您使用替代项目，请使用适当的示例更新您的帖子。这为各种元素包装并分配了您想要的类。
【讨论】：
谢谢你。这确实有很大帮助。 .addClass 是我所缺少的。我正在努力将 jquery UI 添加到覆盖我的自定义类的类中。即使现在它仍然这样做。我假设没有实际的方法可以将部分调用的自动完成结果列表呈现为 html？如果这是有道理的。而不是小部件进行渲染。 @MacKey 这是一个复杂的小部件，因为它使用 Meu 小部件来显示自动完成选项列表。添加您自己的类将帮助您正确定义可以控制元素的 CSS，而不是 UI CSS。你只需要让你的 CSS 选择器更具体：.ui-autocomplete .aa-suggestions.ui-menu-item div.aa-suggestion.ui-menu-item-wrapper 而不仅仅是.aa-suggestion。
感谢您的所有帮助。是的，这是有道理的，会尝试的。谢谢以上是关于从局部视图加载的 jQuery 自动完成结果的主要内容，如果未能解决你的问题，请参考以下文章