asp.net 如何实现百度那样的文本输入框？

ajax中autocomplete
http://topic.csdn.net/u/20091120/20/36a4c64b-24c1-4655-a502-78ab1417413c.html

用AjaxControlToolKit包里面好像有个autocomplete控件，用的webservice

百度那个是自动查询一次数据，这功能其实是很耗资源的，要知道其实百度也是看到Google有这功能后自己被迫加上去的。为了这个功能百度舍了血本

http://download.csdn.net/source/1741160
这里面有源码！！！！！

baIDU autocomplete就可以了

用js配合ajax来写，Ajax中好像有个autocomplete什么的，忘记了

用AjaxControlToolKit包里面有个autocomplete控件，用的是webservice功能实现的
调用后台数据库

http://blog.csdn.net/Rock870210/archive/2009/12/10/4980937.aspx
示例，使用本地数据源，数据库需要使用Ajax

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Simple</title>
  <link type="text/css" rel="stylesheet" href="simple.css" />    <atlas:ScriptManager ID="scriptManager" runat="server">
        <Services>
            <atlas:ServiceReference Path="AnimalService.asmx" />
        </Services>
    </atlas:ScriptManager></head>
<body>
  <form id="form1" name="form1" runat="server">
      <div id="logo">
          <h1>
              Simple</h1>
      </div>
      <div id="header">
          Search:
          <input id="Text1" type="text" /><span id="Text1__autocomplete"></span>
          <input id="Button1" type="button" value="Search" onclick="Button1_onclick();" />
          <br />
          (enter Cat, Cow, Dog or Parrot)
      </div>
      
      <div id="content">
          <div class="left">
              <div id="searchResults">
              </div>
              <div style="display: none;">
                  <div id="searchResults_layoutTemplate">
                      <ul id="searchResults_itemTemplateParent">
                          <li id="searchResults_itemTemplate">
                          <span id="searchResults_Name"></span>
                          <span id="searchResults_Category"></span>
                          <span id="searchResults_Color"></span></li>
                      </ul>
                  </div>
              </div>
          </div>
      </div>
</form>  <script type="text/xml-script">
  <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
    <components>
      <textBox id="Text1" targetElement="Text1">
        <behaviors>
          <autoComplete serviceURL="AnimalService.asmx" serviceMethod="GetCompletionList" minimumPrefixLength="1" completionList="Text1__autocomplete" />
        </behaviors>
      </textBox>
      <listView id="searchResults" cssClass="listView" targetElement="searchResults" itemTemplateParentElementId="searchResults_itemTemplateParent" alternatingItemCssClass="alternatingItem" itemCssClass="item">
        <layoutTemplate>
          <template layoutElement="searchResults_layoutTemplate" />
        </layoutTemplate>
        <itemTemplate>
          <template layoutElement="searchResults_itemTemplate">
            <label targetElement="searchResults_Name">
              <bindings>
                <binding dataPath="Name" property="text" />
              </bindings>
            </label>
            <label targetElement="searchResults_Category">
              <bindings>
                <binding dataPath="Category" property="text" />
              </bindings>
            </label>
            <label cssClass="bar" targetElement="searchResults_Color">
              <bindings>
                <binding dataPath="Color" property="text" />
              </bindings>
            </label>
          </template>
        </itemTemplate>
      </listView>
    </components>
    <references>
    </references>
  </page>
</script>    <script language="javascript" type="text/javascript">
        function Button1_onclick() {
            Quickstart.Samples.Data.AnimalService.GetAnimals(document.getElementById("Text1").value, onSearchComplete);
        }

        function onSearchComplete(results) {
            var searchResults = document.getElementById("searchResults");
            searchResults.control.set_data(results);
        }
    </script></body>
</html>调用Webservice
using System;
using System.Web;
using System.Collections;
using System.Collections.Generic;
using System.Web.Services;
using System.Web.Services.Protocols;namespace Quickstart.Samples.Data
{
    public class Animal
    {
        String _name;
        String _category;
        String _color;

        public String Name
        {
            get { return _name; }
            set { _name = value; }
        }        public String Category
        {
            get { return _category; }
            set { _category = value; }
        }

        public String Color
        {
            get { return _color; }
            set { _color = value; }
        }        public Animal(String name, String category, String color)
        {
            _name = name;
            _category = category;
            _color = color;
        }
    };

    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class AnimalService : System.Web.Services.WebService
    {
        [WebMethod]
        public string[] GetCompletionList(string prefixText, int count)
        {
            prefixText = prefixText.ToLower();
            string[] categories = {
                "Cat",
                "Dog",
                "Cow",
                "Parrot",
            };

            List<string> suggestions = new List<string>();
            foreach (string category in categories)
            {
                if (category.ToLower().StartsWith(prefixText))
                {
                    suggestions.Add(category);
                }
            }
            return suggestions.ToArray();
        }

        [WebMethod]
        public Animal[] GetAnimals(String searchText)
        {
            List<Animal> _data = GetAllAnimals();            if (String.IsNullOrEmpty(searchText))
            {
                return _data.ToArray();
            }            List<Animal> _dataFiltered = new List<Animal>();
            foreach (Animal animal in _data)
            {
                if (searchText.ToLower().CompareTo(animal.Category.ToLower()) == 0)
                    _dataFiltered.Add(animal);
            }            return _dataFiltered.ToArray();
        }        List<Animal> GetAllAnimals()
        {
            List<Animal> _data = new List<Animal>();            _data.Add(new Animal("Felix", "Cat", "Grey"));
            _data.Add(new Animal("Fido", "Dog", "Brown"));
            _data.Add(new Animal("Rover", "Dog", "Brown"));
            _data.Add(new Animal("Daisy", "Cow", "Black and White"));
            _data.Add(new Animal("Polly", "Parrot", "Green"));            return _data;
        }
    }
}

asp.net 高手崛起群3 邀请你加入----- 90711635

你说的这个功能，可以用ajax技术实现，vs添加AjaxControlToolkit工具后中有个AutoCompleteExtender控件可以实现这个功能
你可以看下这个网址http://blog.csdn.net/inmyownsky1/archive/2010/03/24/5412619.aspx

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>

    <script type="text/javascript">
   var req;
   function ajax(url)
   {
     req = false;
     if(window.XMLHttpRequest)
     {
        try
         {
            req = new XMLHttpRequest();
        } catch(e) {
            req = false;
        }          } else if(window.ActiveXObject)
        {
           try
           {
                  req = new ActiveXObject("Msxml2.XMLHTTP");
           } catch(e)
           {
                 try {
                     req = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch(e)
                    {
                         req = false;
                    }
           }
        }
       if(req)
      {
        req.onreadystatechange = processReqChange;
        req.open("GET", url, true);
        req.send();
      }
  }
function processReqChange()
{      if (req.readyState == 4)
    {          if (req.status == 200)
        {
             procBusiness(req.responseText);
        } else {
            alert("获得数据遇到问题！" + req.statusText);
        }
    }
}  function procBusiness(http)
{
    document.getElementById("divResult").style.display="";
    var divResult = document.getElementById("divResult");
    var response = http.split(',');
    var str="";
    str+="<table width=\"100%\">";
    for(var i=0;i<response.length;i++)
    {
        str+="<tr onmouseover=\"aa(this);\" onmouseout=\"bb(this);\"><td onclick=\"completeField(this);\">"+response[i]+"</td></tr>";
    }
   divResult.style.width = document.getElementById("Text1").offsetWidth; + "px";
   var left = calculateOffset(document.getElementById("Text1"), "offsetLeft");
   var top = calculateOffset(document.getElementById("Text1"), "offsetTop") + document.getElementById("Text1").offsetHeight;
   divResult.style.border = "black 1px solid";
   divResult.style.left = left + "px";
   divResult.style.top = top + "px";
    divResult.innerHTML=str;
    if(document.getElementById("Text1").value==""||response.length==0)
    {
          clearValue();
    }
}
function completeField(tdvalue)
{
    document.getElementById("Text1").value=tdvalue.innerText;
    document.getElementById("divResult").style.display="none";
}
function clearValue()
{
    document.getElementById("divResult").innerHTML="";
    document.getElementById("divResult").style.border="none";
}function calculateOffset(field, attr)
{      var offset = 0;
      while(field) {
        offset += field[attr];         field = field.offsetParent;
      }
     return offset;
}
function btnOnClick()
{
    var name = document.getElementById("divResult");
    var txtValue=document.getElementById("Text1");
    if(txtValue=="")
        return;
    ajax("Search.aspx?title="+escape(txtValue.value));
}
function KeyDown()
{
   if(event.keyCode==32)
   {
      event.keyCode=0;
      event.returnValue=false;
      return false;
   }
}
function aa(tr)
{
    tr.bgColor="#EFF2FA";
}
function bb(tr)
{
    tr.bgColor="transparent";
}
</script>
</head>
<body>
    <form id="form1" runat="server"><div>
        <input id="Text1" type="text" onkeydown="KeyDown();" onkeyup="btnOnClick();"/></div>
        <div id="divResult" style="position:absolute; font-size:12px"></div>
    </form>
</body>
</html>
public DataTable GetAllStu(string key)
       {
           DataTable dt = new DataTable();
           DataColumn dataColumn;
           DataRow dataRow;
           using( SqlConnection conn = GetConnection())
           {

           conn.Open();
           string getAllStu = "select * from stu";
           SqlCommand cmd = new SqlCommand(getAllStu, conn);
           DbDataReader dr =  cmd.ExecuteReader();
           for (int i = 0; i < dr.FieldCount; i++)
           {
               dataColumn = new DataColumn();
               dataColumn.ColumnName = dr.GetName(i);
               dataColumn.DataType = dr.GetFieldType(i);
               dt.Columns.Add(dataColumn);
           }
          while(dr.Read())
          {
              string str = String.Empty;
              dataRow = dt.NewRow();
              for (int i = 0; i < dr.FieldCount; i++)
              {
                  dataRow[i] = dr[i];
                  str += dr[i].ToString();//连接没列的字符
              }
              if (str.IndexOf(key) != -1)//判断有没有输入的关键字
              {
                  dt.Rows.Add(dataRow);//有的话假如dt
              }
          }
          dr.Close();
          conn.Close();
          }
         return dt;
       }
    }今天在用ajax做一个搜索自动补全的例子时，出现了一个问题
   这是错误提示：AjaxControlToolkit requires ASP.NET Ajax 4.0 scripts. Ensure the correct version of the scripts are referenced.
If you are using an ASP.NET ScriptManager, switch to the AjaxScriptManager in System.Web.Ajax.dll, or use the ToolkitScriptManager in AjaxControlToolkit.dll.
    然后自己在网上找了下只要将<asp:ScriptManager ID="ScriptManager1" runat="server" />
更改为：
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajaxToolkit:ToolkitScriptManager>当然在页面的头部，你有写 <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>   最后说下<ajaxToolkit:AutoCompleteExtender runat="server" ID="AutoCompleteSearch"
   MinimumPrefixLength="1" TargetControlID="searchText"
   ServicePath="autoCompleteWebService.asmx"
   ServiceMethod="GetSearchDepartment"></ajaxToolkit:AutoCompleteExtender>这个控件的相关属性  当然，这个控件必须放在UpdatePanel里才能生效  MinimumPrefixLength：指输入一个字符或汉字就出现自动补全的功能，当然可以指定2，3等  ServicePath：当然实现这个自动补全的功能，需要创建一个web服务，这个创建的web服务里面的方法主要是从数据库中取出相关数据我在项目里创建的文件是autoCompleteWebService.asmx，这个数据值创建web服务的文件路径  ServiceMethod:web服务里相对的服务方法，从数据库中获取相关数据   TargetControlID：所操作的控件，及搜索输入框的ID
ajax里面有个扩展控件的集合ajaxcontroltoolkit，里面有个autocomplete 控件可以实现这个功能的

谢谢楼上各们VS 2008 内置的 ajax 控件里没有 autocomplete 控件吗？

自己 up 一下再问一次，VS2008 里没有现成的控件吗？

调试易

asp.net 如何实现百度那样的文本输入框？

解决方案 »