“未找到结果”JqueryUI 类别列表
"No result found" JqueryUI category listing
我在这里面临的问题是 http://jqueryui.com/autocomplete/#categories 我无法弄清楚如何使"找不到结果"出现在自动完成菜单搜索的下拉列表中。有人可以分享如何实现这一目标的见解吗?
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Categories</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
.ui-autocomplete-category {
font-weight: bold;
padding: .2em .4em;
margin: .8em 0 .2em;
line-height: 1.5;
}
</style>
<script>
$.widget( "custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function( ul, items ) {
var that = this,
currentCategory = "";
$.each( items, function( index, item ) {
if ( item.category != currentCategory ) {
ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
currentCategory = item.category;
}
that._renderItemData( ul, item );
});
}
});
</script>
<script>
$(function() {
var data = [
{ label: "anders", category: "" },
{ label: "andreas", category: "" },
{ label: "antal", category: "" },
{ label: "annhhx10", category: "Products" },
{ label: "annk K12", category: "Products" },
{ label: "annttop C13", category: "Products" },
{ label: "anders andersson", category: "People" },
{ label: "andreas andersson", category: "People" },
{ label: "andreas johnson", category: "People" }
];
$( "#search" ).catcomplete({
delay: 0,
source: data
});
});
</script>
</head>
<body>
<label for="search">Search: </label>
<input id="search" />
</body>
</html>
$( "#search" ).catcomplete({
delay: 0,
source: data
});
替换为:
$( "#search" ).catcomplete({
delay: 0,
source: function(request, response) {
var result = data.slice(0);
result = $.ui.autocomplete.filter(result, request.term);
if(! result.length) {
result.push({
label: 'No Result Found',
category: "",
isPlaceholder: true
});
}
response(result);
}
});
查看示例
相关文章:
- 要求输入在数据列表中
- 从javascript创建一个列表
- 如何使用jQuery选择下拉列表的值
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- 将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection)
- Javascript按钮下拉列表
- 如何使用json将对象列表从java转换为javascript
- jQueryUI可排序-从可排序列表中删除li
- 如何在列表中使用onclick事件(jqueryui可选)
- iframe内容可编辑,位于jqueryUI可排序列表项中
- jQueryUI 自动完成结果列表在尝试滚动时会弹回顶部
- 使用 jqueryui 的多个可排序列表 - 不希望项目在列表组之间混合
- 使用 jQuery 编写一个可排序的列表(只是基本功能,jQueryUI 对我来说太重了)
- “未找到结果”JqueryUI 类别列表
- JqueryUI 工具提示可防止<选择>元素下拉列表在 IE 11 中保持关闭
- 如何制作一个jQueryUI可丢弃列表,其中添加到列表中的元素也是丢弃目标
- JQueryUI:创建两个拖放列表的最佳方式,其中一个是可排序的,另一个在拖放时重新排序
- jQueryUI自动完成-如何将搜索词与关键字列表匹配并显示匹配的结果
- 如何序列化与jQueryUI可排序列表的当前项相关的数据
- jQueryUI可排序连接列表-当项目滚动到新列表中时,未触发Over事件