首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何创建textbox列表控件?

如何创建textbox列表控件?
EN

Stack Overflow用户
提问于 2012-08-23 17:28:17
回答 3查看 931关注 0票数 1

我有一个用于输入employeename.When的文本框,用户键入员工名,我想列出数据库中以键入的字母开头的所有员工,就像下拉列表一样

我不想要任何第三方control.Is有任何更容易和理解的方式来做这件事?

EN

回答 3

Stack Overflow用户

发布于 2012-08-23 17:34:11

你可以使用这个库,它很简单,有好的代码

http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/AutoComplete/AutoComplete.aspx

票数 1
EN

Stack Overflow用户

发布于 2012-08-23 17:57:16

首先,我们将使用将使用ASP.NET Web Service

(假设是Name.asmx)。

添加对Jquery UI CSS文件的引用

代码语言:javascript
运行
复制
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

现在添加对Jquery library的引用

代码语言:javascript
运行
复制
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

添加对Jquery UI的引用

代码语言:javascript
运行
复制
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script> 

假设您有一个包含auto类的textbox

代码语言:javascript
运行
复制
<asp:TextBox ID="tbAuto" class="auto" runat="server">
</asp:TextBox>

现在,我们将编写一个脚本,将在textbox中键入的每个字母传递给我们的Web Service (Name.asmx)

代码语言:javascript
运行
复制
<script type="text/javascript">
$(function() {
    $(".auto").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "Name.asmx/FetchNames",
                data: "{ 'name': '" + request.term + "' }",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataFilter: function(data) { return data; },
                success: function(data) {
                    response($.map(data.d, function(item) {
                        return {
                            value: item.Name
                        }
                    }))
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
        },
        minLength: 2
    });
});
</script>

最后是C#中的Web Service

代码语言:javascript
运行
复制
[WebMethod]
public List<string> FetchNames(string name)
{
//Write your query to get names that begin with the letter passed as parameter and     return results
//Remember return the results by converting it to List.
}

希望这能有所帮助。

如果你有问题,请回复。

编辑:

下面是查询。

代码语言:javascript
运行
复制
SqlDataReader rdr = null;
SqlConnection con = null;
SqlCommand cmd = null;
List<string> empName=new List<string>();

            try
            {
                // Open connection to the database
                string ConnectionString = "server=yourservername;uid=sa;"+
                    "pwd=yourpswd; database=yourdatabase";
                con = new SqlConnection(ConnectionString);
                con.Open();

                // Set up a command with the given query and associate
                // this with the current connection.
                string CommandText = "SELECT FirstName" +
                                     "  FROM Employees" +
                                     " WHERE (FirstName LIKE +name%)";
                cmd = new SqlCommand(CommandText);
                cmd.Connection = con;


                // Execute the query
                rdr = cmd.ExecuteReader();


                while(rdr.Read())
                {
                   empName.Add(rdr["FirstName"].ToString());
                }
              return empName;
            }
            catch(Exception ex)
            {
                // Print error message

            }

注意:我还没有对此进行测试,但我认为只要根据您的需要做一些更改,它就会工作得很好!我还要试着改进这段代码

票数 0
EN

Stack Overflow用户

发布于 2012-08-23 17:58:29

您可以使用jquery autocomplete api:

代码语言:javascript
运行
复制
$(document).ready(function () {
  $("#<%=ApplicationSearchResult.ClientID %>").autocomplete({ //applicationSearchResult is your textbox
  source: function (request, response) {
   $.ajax({
   type: "POST",
   url: "Dashboard.aspx/GetTreeNodesByText", // the function you have to call to bring you the data
   data: "{'text': '" + request.term + "'}", // the letter the user entered in the textbox
   contentType: "application/json; charset=utf-8",
   dataType: "json",
   success: function (data) {
   response(data.d);
   }
   });
   },
   minLength: 1
   });
   });
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/12088642

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档