我使用的是jQuery auto-complete，它与jQuery ui捆绑在一起。无论如何，我需要将这一点自定义为弹出链接，而不仅仅是文本。
我有一个多维PHP数组，它包含一些文本和MYSQL数据库中该文本的相应id。
$js_array = json_encode($php_array);
echo "var javascript_array = ". $js_array . ";'n";
现在我有了一个多维js数组。但我不知道如何使用这些值来创建链接。
数组中的文本项应该是链接的文本部分，ID应该是链接中的URL。
这是我现有的代码。如何自定义以实现我的目的。。。
$("#search_query").autocomplete( {
source: javascript_array
});
$(function() {
var projects = [
{
value: "jquery",
label: "jQuery",
desc: "the write less, do more, JavaScript library",
icon: "jquery_32x32.png"
},
{
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery",
icon: "jqueryui_32x32.png"
},
{
value: "sizzlejs",
label: "Sizzle JS",
desc: "a pure-JavaScript CSS selector engine",
icon: "sizzlejs_32x32.png"
}
];
$( "#project" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( "#project" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#project" ).val( ui.item.label );
$( "#project-id" ).val( ui.item.value );
$( "#project-description" ).html( ui.item.desc );
$( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
return false;
}
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};
});
您可以使用任何自定义的属性值，标签必须保留，所有都符合您的要求（这里我们使用的是desc and icon）。
使用_renderItem选项：
方法，该方法控制小部件菜单中每个选项的创建。该方法必须创建一个新的
<li>元素，将其附加到菜单中，然后退回。
_renderItem: function( ul, item ) {
return $( "<li data-value='"+item.value+"'><a href='#'>"+item.label+"</a></li>" )
.appendTo( ul );
}
1） 删除此：
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};
2） 把它加在这里。确保你有一个href参数，否则大多数浏览器不会知道它是一个链接。
$( "#project" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( "#project" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#project" ).val( ui.item.label );
$( "#project-id" ).val( ui.item.value );
$( "#project-description" ).html( ui.item.desc );
$( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
return false;
},
_renderItem: function( ul, item ) {
return $( "<li data-value='"+item.value+"'><a href='#'>"+item.label+"</a></li>" )
.appendTo( ul );
}
});