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

JavaScript013

怎么在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

}

})

})

1.push方法将单个元素或者另外的数组添加到条用该方法的数组末尾去

2.concat方法就是将两个数组或者元素之间连接起来调用该方法的数组放在前面,方法实参放在后面

3.pop方法删除数组中的最后一个元素且会将这个被删除的元素返回

4.splice 方法删除或插入指定位置的元素函数的原型为splice(index,howmany,element1,.....,elementX...

5.reverse 方法即将数组的顺序反转