各位大神好, 我想做一个功能,就是类似baidu google 搜索的时候,自动补全功能。要求数据重后他提取。
jquery ui 有一个autocomplete的插件,可以实现这个功能 在后台传一个 json格式的数组数据过来。JS如下:
$(function() {
var cache = {};
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#tags" )
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "ui-autocomplete" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 1,
source: function (request, response) {
var term = request.term;
if ( term in cache ) {
response( cache[ term ] );
return;
}
$.ajax({
type: "POST",
url: mlog.variable.base+"/admin/post/autocomplete?keyword=" + extractLast( request.term ) ,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
cache[ term ] = $.map(data, function(item){
return item.name
});
response( $.ui.autocomplete.filter(
$.map(data, function(item){
return item.name
}), extractLast( request.term ) ) );
},
error: function () {
alert("补全失败");
}
});
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
terms.pop();
terms.push( ui.item.value );
terms.push( "" );
this.value = terms.join( ", " );
return false;
}
});
});
<script type="text/javascript" src="/script/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="/script/jquery-ui/themes/base/jquery.ui.all.css">
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。