怎么在js实现类似百度的自动补全功能

JavaScript010

怎么在js实现类似百度的自动补全功能,第1张

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/jsoncharset=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

}

})

})

VS2012的设置方法:

工具/选项/文本编辑器/Javascript/IntelliSense/常规/仅使用Tab或Enter键提交,把这个默认为选中的选项去掉即可。

VS2010类似,菜单中略有不同,可以找到。