一、引入所需的js插件
<script type="text/javascript" src="js/jquery-1.10.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.0.custom.js"></script>
二、html部分
<input id="conSearch" type="search" placeholder="搜索:用户/科室/讨论组" original-title="">
三、js部分
$('#conSearch').autocomplete({minLength: 1, source: function(search, response) {
$.get('ajax/getSearchRange.php', { search: search.term }, function(result) {
if (result.status == 'success' && result.data.length > 0) {
$( "#conSearch" ).autocomplete( "option", "autoFocus", true );
response(result.data);
} else {
$( "#conSearch" ).autocomplete( "option", "autoFocus", false );
response(['No search results...']);
}
});
},
focus: function(event, focused) {
event.preventDefault();
},
select: function(event, selected) {
event.stopPropagation();
if(!selected.item.conWith){
return false;
}
var conWith = selected.item.conWith;
var conType = selected.item.conType;
return false;
}
})
// customize internal _renderItem function to display groups and users differently
.data("ui-autocomplete")._renderItem = function( ul, item ) {
var insert = $( "<a>" );
var text = "";
if(item.conType == 'user'){
text = item.conWith + '(user)';
}else if(item.conType == "group"){
text = item.conWith + '(group)';
}else if(item.conType == "tempgroup"){
text = item.conWith + '(tempgroup)';
}else{
text = item.value;
}
insert.text( text );
if(item.conType == 'group' || item.conType == 'tempgroup') {
insert = insert.wrapInner('<strong></strong>');
}
return $( "<li>" )
.addClass(item.conType)
.append( insert )
.appendTo( ul );
};
demo下载地址 http://download.csdn.net/detail/jiangjundriver/9872416