表：ProductsNum------sNum-------ProductName
001 s001 名称1
002 s002 名称2
........想实现如图所示的功能（图做的不太好，呵呵）２个输入框都能实现自动提示功能选择后“名称”中显示读取选中值请高手指点哦～～［用ａｊａｘ吗～］，主要问题就是２个输入框如何实现
001 s001 名称1
002 s002 名称2
........想实现如图所示的功能（图做的不太好，呵呵）２个输入框都能实现自动提示功能选择后“名称”中显示读取选中值请高手指点哦～～［用ａｊａｘ吗～］，主要问题就是２个输入框如何实现
2、query.autocomplete仿google提示
动态加载数据，然后动态调整Top。其实就是当前有录入焦点的那个TextBox的Top
那就用两个AutoCompleteExtender呗
http://www.asp.net/AJAX/AjaxControlToolkit/Samples/AutoComplete/AutoComplete.aspx
var intIndex=0;arrList = new Array();
arrList[intIndex++] = " 1sdfsdf.com";
arrList[intIndex++] = " a11sdafs.net";
arrList[intIndex++] = " b22dsafsdf";
arrList[intIndex++] = " c333asdfsadf";
arrList[intIndex++] = " 4444dsafasdf";
arrList[intIndex++] = " dddsfddsafdsaf";
arrList[intIndex++] = " 121213dsafsdaf";
arrList[intIndex++] = " 43213asdfadsf";
arrList[intIndex++] = " dsa3121dasf3";
arrList[intIndex++] = " a213";
arrList[intIndex++] = " 323313";
arrList[intIndex++] = " 3213";
arrList[intIndex++] = " 32213";
arrList[intIndex++] = " dsfsdddd";
arrList[intIndex++] = " ds11dfsfd";
arrList[intIndex++] = " ffdafd";
arrList[intIndex++] = " afdfd";
arrList[intIndex++] = " afd";
arrList[intIndex++] = " baffad";
arrList[intIndex++] = " 2fda2fd";
arrList[intIndex++] = " dasd"; function smanPromptList(arrList,objInputId){
this.style = "background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;"
if (arrList.constructor!=Array){alert('smanPromptList初始化失败:第一个参数非数组!');return ;}
window.onload =function() {
arrList.sort(function(a,b){
if(a.length>b.length)return 1;
else if(a.length==b.length)return a.localeCompare(b);
else return -1;
})
var objouter=document.getElementById("__smanDisp") //显示的DIV对象
var objInput = document.getElementById(objInputId); //文本框对象
var selectedIndex=-1;
var intTmp; //循环用的:)
if (objInput==null) {alert('smanPromptList初始化失败:没有找到"'+objInputId+'"文本框');return ;}
//文本框失去焦点
objInput.onblur=function(){
objouter.style.display='none';
}
//文本框按键抬起
objInput.onkeyup=checkKeyCode;
//文本框得到焦点
objInput.onfocus=checkAndShow;
function checkKeyCode(){
var ie = (document.all)? true:false
if (ie){
var keyCode=event.keyCode
if (keyCode==40||keyCode==38){ //下上
var isUp=false
if(keyCode==40) isUp=true ;
chageSelection(isUp)
}else if (keyCode==13){//回车
outSelection(selectedIndex);
}else{
checkAndShow()
}
}else{
checkAndShow()
}
divPosition()
} function checkAndShow(){
var strInput = objInput.value
if (strInput!=""){
divPosition();
selectedIndex=-1;
objouter.innerHTML ="";
for (intTmp=0;intTmp<arrList.length;intTmp++){
for(i=0;i<arrList[intTmp].length;i++){
if (arrList[intTmp].substr(i, strInput.length).toUpperCase()==strInput.toUpperCase()){
addOption(arrList[intTmp],strInput);
}
}
}
objouter.style.display='';
}else{
objouter.style.display='none';
}
function addOption(value,keyw){
var v=value.replace(keyw,"<b><font color=red>"+keyw+"</font></b>");
objouter.innerHTML +="<div onmouseover=\"this.className='sman_selectedStyle'\" onmouseout=\"this.className=''\" onmousedown=\"document.getElementById('"+objInputId+"').value='" + value + "'\">" + v + "</div>"
}
}
function chageSelection(isUp){
if (objouter.style.display=='none'){
objouter.style.display='';
}else{
if (isUp)
selectedIndex++
else
selectedIndex--
}
var maxIndex = objouter.children.length-1;
if (selectedIndex<0){selectedIndex=0}
if (selectedIndex>maxIndex) {selectedIndex=maxIndex}
for (intTmp=0;intTmp<=maxIndex;intTmp++){ if (intTmp==selectedIndex){
objouter.children[intTmp].className="sman_selectedStyle";
}else{
objouter.children[intTmp].className="";
}
}
}
function outSelection(Index){
objInput.value = objouter.children[Index].innerText;
objouter.style.display='none';
}
function divPosition(){
objouter.style.top =getAbsoluteHeight(objInput)+getAbsoluteTop(objInput);
objouter.style.left =getAbsoluteLeft(objInput);
objouter.style.width=getAbsoluteWidth(objInput)
}
}
document.write("<div id='__smanDisp' style='position:absolute;display:none;" + this.style + "' onbulr> </div>");
document.write("<style>.sman_selectedStyle{background-Color:#102681;color:#FFFFFF}</style>");
function getAbsoluteHeight(ob){
return ob.offsetHeight
}
function getAbsoluteWidth(ob){
return ob.offsetWidth
}
function getAbsoluteLeft(ob){
var s_el=0;el=ob;while(el){s_el=s_el+el.offsetLeft;el=el.offsetParent;}; return s_el
}
function getAbsoluteTop(ob){
var s_el=0;el=ob;while(el){s_el=s_el+el.offsetTop ;el=el.offsetParent;}; return s_el
}
}
smanPromptList(arrList,"inputer")
</script>
<table><tr><td>
<input type="text" id="inputer"></td></tr></table>
实现你的要求没问题
1 asp.net ajax扩展控件
2 jquery
3 javascript
个人意见在textbox的获取焦点事件里面做数据绑定+css样式调用来实现
仿google联想输入，网上有介绍，可以用asp.net2.0可以通过客户回调来实现，VS2008就直接用AJAX工具吧
前台js在文本框下面创建一个div
把数据填充进div
在做一些模拟按键 上下左右回车 键
对应上一些css样式 如当前选中行背景成暗色
一些思路
其实思路有了，至于用什么去实现都无所谓了
可以用现成js控件，也可以自己试着写下
具体实现方法期待中。
两个 Webservice
就行了
http://www.cnblogs.com/Ferry/archive/2008/12/24/1361505.html