jqueryUi autocomplete - 自定义数据和显示
jqueryUi autocomplete - custom data and display
我的完整代码在这里: http://jsfiddle.net/HfNk9/13/
我正在寻找此示例jqueryUi 自动完成 - 自定义数据和显示。
假设对象项目是不同的,它看起来像这样:
project = [
{
name: 'bar',
value: 'foo',
imgage: 'img.png'
}
]
如果我设置source = project
则自动完成是指project.value
而不是project.name
。
我应该如何改变这种行为?
var autocomplete = function(element, data) {
var fixtures = [
{
avatar: "http://www.placekitten.com/20/20",
name: 'aaaaaaaaa',
value: 'bbbbbbbbb'}
];
element.autocomplete({
minLength: 3,
source: function(request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
response($.grep(fixtures, function(value) {
return matcher.test(value.name);
}));
},
create: function() {
console.log(fixtures)
element.val(fixtures.name);
},
focus: function(event, ui) {
element.val(ui.item.name);
return false;
},
select: function(event, ui) {
element.val(ui.item.name);
return false;
}
}).data('autocomplete')._renderItem = function(ul, item) {
return $('<li></li>')
.data('item.autocomplete', item)
.append('<a><img src="' + item.avatar + '" />' + item.name + '<br></a>')
.appendTo(ul);
};
};
autocomplete($('#auto'));
我的完整代码:http://jsfiddle.net/HfNk9/13/
您需要过滤与默认情况下自动完成小部件搜索不同的属性(因为您已经注意到,当将源数组与对象一起使用时,它是name
或value
的)。
您可以使用函数而不是数组作为源,并通过以下方式执行自己的过滤:
element.autocomplete({
minLength: 3,
source: function(request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
response($.grep(fixtures, function(value) {
return matcher.test(value.name);
}));
},
create: function() {
console.log(fixtures)
element.val(fixtures.name);
},
focus: function(event, ui) {
element.val(ui.item.name);
return false;
},
select: function(event, ui) {
element.val(ui.item.name);
return false;
}
}).data('autocomplete')._renderItem = function(ul, item) {
return $('<li></li>')
.data('item.autocomplete', item)
.append('<a><img src="' + item.avatar + '" />' + item.name + '<br></a>')
.appendTo(ul);
};
示例:http://jsfiddle.net/QzJzW/
您应该使用 select
属性:
$("...").autocomplete({
source: ...,
select: function( event, ui ) { //when an item is selected
//use the ui.item object
alert(ui.item.name)
return false;
}
});
答案就在你链接到的页面的源代码中。如果要使用 name
的值而不是 value
,则可以执行以下操作:
$( "#input" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( "#input" ).val( ui.item.value );
return false;
},
select: function( event, ui ) {
$( "#input" ).val( ui.item.value );
return false;
}
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.name + "</a>" )
.appendTo( ul );
};
相关文章:
- 如何通过所选索引(AngularJS)在模态弹出窗口中显示数据
- Angular渲染元素,但不渲染;t显示数据
- 如何在分页事件中突出显示数据表中的单词
- Angular JS和Node路由/布线-仅在页面刷新后显示数据
- MVC中关于表的自定义工具提示-每行显示数据
- Highcharts:根据表单输入动态显示数据
- 重置transform:rotate(),方法是移除并追加在追加和重绘图表后未显示数据的画布
- jqGrid无法显示数据
- 显示数据的最快方式
- 如何从jquery日期和时间选择器中选择和显示数据
- 我的复选框没有't使用的循环来显示数据
- 如何在状态输入ui路由器时立即显示模板,然后当承诺被解决时显示数据
- 车把模板不显示数据
- 如何完成表单后使用 AJAX 重定向并在其他页面上显示数据
- Html5 Web 存储未在第二页中显示数据
- ASP.Net VB - 显示数据折叠样式
- 正确禁止显示数据表中的警告
- 在使用 JS 进行选择时在文本框中显示数据
- 如何使用 C# 和 Angular js 在视图上显示数据
- 在轨道上的 Ruby 文本字段中动态显示数据