Question

如何使用js或者jquery实现如下图的自动补全效果:

例如我输入nh2,然后会从系统查询和nh2相关的结果,然后自动补全,并且把自动输入的内容选中:如图:

如果用户再次输入内容,会再次根据用户输入的内容查询,并选中自动补全的内容,但是用户输入的内容不会选中,输入的时候也不能删除.
如图:

望各位同行赐教,感激不尽.





Answer 1

不能删除没理解，自动选中是ok的，参考代码：
<input type="text" onkeyup="abc(this);" />

function abc(txt){
var obj = $(txt);
var v = obj.val();
if(v == "1"){
obj.val("1234");
}else if(v == "11"){
obj.val("1122");
}
var rng=txt.createTextRange();
rng.moveStart("character",v.length)
rng.moveEnd("character",obj.val().length)
rng.select();
}

追问

不能删除的意思就是,我输入nh2,系统自动补全为nh201301,如果用户再次输入内容,nh2不能被删除,但是选中的内容会被删除,然后根据搜索结果改变.