“输入问题答案立即呈现”怎么实现？

Question

就是csdn的这个功能，很喜欢，想要弄到自己程序上来
根据自己贫乏的js经验 写了一小段，实在要崩溃了
哪位能帮帮忙<script type="text/javascript">
function chkchgd()
{
    //当文本框内容改变，将内容存入hiddenfield,供后台使用
    document.getElementById('<%=this.hfdReturn.ClientID %>').value=document.getElementById('Keyname').value;
    //执行后台方法ReturnPath
    var a = "<%=ReturnPath()%>"; 
}
</script><input id="Keyname" name="Keyname" onpropertychange="chkchgd();" type="text" /><br /><asp:Literal ID="ltlReturn" runat="server"></asp:Literal>
<asp:HiddenField ID="hfdReturn" runat="server" />C#后台代码：    public string ReturnPath()
    {        string aa = "";        if (this.hfdReturn.Value != "")
        {
            //从数据库查询与输入文字部分匹配的项
            CCompanyManage exm = new CCompanyManage();
            exm.CompanyName = this.hfdReturn.Value;
            DataTable dt = exm.GetDataTable();            //对结果集循环生成动态HTML
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                aa += "<div id='div" + i + "' style='color:Blue;display:block; cursor: hand;'>" + dt.Rows[i]["CompanyName"].ToString() + "</div><br />";
            }
        }        this.ltlReturn.Text = aa;
        
        return aa;
    }
现在碰到的第一个问题，页面在运行起来后就执行了onpropertychange事件，并且带动后台ReturnPath方法也执行了
第二个问题，onpropertychange应该是当文本框内容变化就触发的，可是只执行了一次就没反应了

Answer 1

不是这么玩的,建议你先上网搜索关键字 "ajax 自动完成"

Answer 2

onkeyup事件啊，当松开按键时触发函数

Answer 3

再顶一下
有人说我这写法后台代码只会在编译的时候执行一次，他给了我另一种思路
可惜实在技术浅薄，有了思路也写不出JS代码 哪位高手给看一下<input   type="textbox"   id="search"   onKeyPress="javascript:SendKeyWord(this.value);">   
    
  <script   language=javascript>   
  function   SendKeyWord(val)   
  {   
          //构建xmlhttp对象，利用Get方法发送val   
  }   
  </script> 后台cs代码：Page_Load(object   sender,EventArgs   e)   
  {   
        if(Request.QueryString["keyWord"]!=null   &&   Request.QueryString["keyWord"]!="")   
                BindData();   
    
  }         
  void   BindData()   
  {   
      //获取Request.QueryString["keyWord"]的值   
      //查询数据库   
      //重新绑定DataGrid   
  }他说客户端处理textbox的onKeyDown和onKeyPress事件  
    
  然后用xmlhttp发送关键字回服务器端，局部刷新  

Answer 4

此问题解决了，代码贴上，语言C#，环境VS2005
前台Default.aspx页代码<script type="text/javascript">
var XMLHttpReq;
var completeDiv;
var inputField;
var completeTable;
var completeBody;
//创建XMLHttpRequest对象      
function createXMLHttpRequest() {
       if(window.XMLHttpRequest) { //Mozilla 浏览器
              XMLHttpReq = new XMLHttpRequest();
       }
       else if (window.ActiveXObject) { // IE浏览器
              try {
                     XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
              } catch(e){
                     try{
                          XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
                     } catch (e) {}
              }
       }
}//发送匹配请求函数
function findNames() {
      inputField = document.getElementById("names");           
      completeTable = document.getElementById("complete_table");
      completeDiv = document.getElementById("popup");
      completeBody = document.getElementById("complete_body");
      if (inputField.value.length > 0) {
             createXMLHttpRequest();           
             var url = "DictionaryAutoComplete.aspx?names=" + escape(inputField.value);    //
             XMLHttpReq.open("GET", url, true);
             XMLHttpReq.onreadystatechange = processMatchResponse;//指定响应函数
             XMLHttpReq.send(null); // 发送请求
      } else {
             clearNames();
      }
}// 处理返回匹配信息函数
function processMatchResponse() {
      if (XMLHttpReq.readyState == 4) { // 判断对象状态
          if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
                   setNames(XMLHttpReq.responseXML.getElementsByTagName("res"));
          }else { //页面不正常
               window.alert("您所请求的页面有异常。");
          }
      }
}//生成与输入内容匹配行
function setNames(names) {           
      clearNames();
      var size = names.length;
      setOffsets();
      var row, cell, txtNode;
      for (var i = 0; i < size; i++) {
          var nextNode = names[i].firstChild.data;
          row = document.createElement("tr");
          cell = document.createElement("td");    
          cell.onmouseout = function() {
              this.className='mouseOver';
          };
          cell.onmouseover = function() {
              this.className='mouseOut';
          };
          cell.setAttribute("bgcolor", "#ffddcc");
          cell.setAttribute("border", "0");
          cell.onclick = function() { 
              completeField(this); 
          } ;
          txtNode = document.createTextNode(nextNode);
          cell.appendChild(txtNode);
          row.appendChild(cell);
          completeBody.appendChild(row);
      }
}//设置显示位置                
function setOffsets() {
      completeTable.style.width = "auto";    //显示自动完成的提示框宽度自动伸展或缩小
      var left = calculateOffset(inputField, "offsetLeft");
      var top = calculateOffset(inputField, "offsetTop") + inputField. offsetHeight;
      completeDiv.style.border = "black 1px solid";
      completeDiv.style.left = left + "px";
      completeDiv.style.top = top + "px";
}//计算显示位置
function calculateOffset(field, attr) {
      var offset = 0;
      while(field) {
          offset += field[attr];
          field = field.offsetParent;
      }
      return offset;
}//填写输入框
function completeField(cell) {
      inputField.value = cell.firstChild.nodeValue;
      clearNames();
}//清除自动完成行
function clearNames() {
      var ind = completeBody.childNodes.length;
      for (var i = ind - 1; i >= 0 ; i--) {
          completeBody.removeChild(completeBody.childNodes[i]);
      }
      completeDiv.style.border = "none";
}
</script>
<asp:TextBox ID="names" runat="server"></asp:TextBox>
<div style="position: absolute;width:153px" id="popup" runat="server">
      <table id="complete_table" border="0" cellspacing="0" cellpadding="0" style="font-size:12px">
          <tbody id="complete_body">
          </tbody>
      </table>
</div>
Default.aspx.cs后台代码：protected void Page_Load(object sender, EventArgs e)
    {
        this.names.Attributes.Add("onKeyup", "findNames();");
    }
DictionaryAutoComplete.aspx.cs前台无代码，后台代码：using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Text;
using System.Data.SqlClient;public partial class DictionaryAutoComplete : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Response.Clear();
        Response.ContentType = "text/xml";     //设置输出的格式为XML
        Response.Charset = "UTF-8";              //设置输出的编码为UTF-8
        this.GetXmlData();
    }    private void GetXmlData()
    {    //这是用来获取下拉列表框中下面提示的项目数据，获取的数据用XML格式输出
        SqlConnection conn = new SqlConnection("server=localhost; uid=sa; pwd=; database=CRM;");//你的数据库连接字符串
        string names = Request.QueryString["names"];
        StringBuilder xmlData = new StringBuilder();
        xmlData.AppendLine(@"<?xml version='1.0' encoding='UTF-8' ?>");
        xmlData.AppendLine(@"<response>");
        string sql = "";
        SqlCommand cmd = new SqlCommand();
        sql = "select * from CompanyManage where CompanyName like '%" + names + "%'";//你的SQL语句，正式页面最好不要拼SQL，防SQL注入
        cmd = new SqlCommand(sql, conn);
        conn.Open();
        SqlDataReader sdr = cmd.ExecuteReader();
        while (sdr.Read())
        {
            xmlData.AppendLine(@"<res>" + sdr["companyName"].ToString() + "</res>");
        }
        sdr.Close();
        conn.Close();
        xmlData.AppendLine(@"</response>");
        Response.Write(xmlData.ToString());
    }}
效果相当赞！与百度、google效果几乎一样了！就是没有↓键选择功能，匹配项出来得鼠标点选