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

JavaScript023

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

}

})

})

asp、js补齐本身就是Sublime Text自带的功能,哪需要插件,估计你是没弄懂怎么用。

运行ST >新建个文件 >ST右下角有排文字,默认一般应该是Plain Text >点这排字展开选择语言菜单 >在菜单里面选中 javascript

进去输点js关键字试试..

ST的 编辑 菜单下也有自动完成这个选项,我3.0是倒数第4个选项,可以自己设个快捷键。

貌似很多语言的自动完成有些关键字不都全,差些关键字,你可以自行配置一下,ST高度可配置很强大的...

原理很简单,但实现很复杂。

如果是代码补全的,一般是通过反射去获取类的一些信息,然后反馈给用户,用于自动填充。

如果是数据库中有的,有3种解决方案,对应2个不同的场景。

第一个场景:访问人数不多,项目不大,服务器资源空闲程度高。对应的方案,直接针对数据库进行关键字模糊搜索。简单粗暴,实现技术要求很低。优点开发难度低,架构简单,缺点匹配程度可能不满足当前需求

第二个场景:访问人数多,服务器资源利用率要求高。对应的方案,建立目录缓存(也可能是NOSQL数据库),对关键字在缓存(NOSQL数据库)进行模糊查找并建立更新机制,但不能全完做到实时同步。优点开发难度相对较高,架构难度一般,缺点用户体验可能不好。

最后一种解决方案,建立大数据平台,使用搜索引擎进行搜索,搭配机器学习提高准确率。优点就是相对其他的基本没有缺点。