实现输入框【输入填写+动态提示信息+下拉选择】

最新推荐文章于 2025-06-14 15:21:25 发布

转载最新推荐文章于 2025-06-14 15:21:25 发布 · 530 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Tanghongchang/p/7755039.html

文章标签：

#数据库 #python #ui

本文介绍了一个使用 C# 和 ASP.NET 实现的输入框，该输入框能够结合下拉列表进行动态提示及选择。通过后端加载数据到隐藏字段，再利用 JavaScript 解析并动态生成下拉选项，同时监听输入框变化实现动态提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现输入框能填写能下拉选择，填写时动态提示

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Default2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

        if (IsPostBack)
        { 
        
        }

        using (UsersDataContext con = new UsersDataContext())
        {
            string s = "" ;
            int count = 0;
            List<Users> ulist = con.Users.ToList();

            for (int i = 0; i < ulist.Count; i++)
            {
                if (count > 0)
                    s += ",";
                s += ulist[i].Nickname;
                count++;
            }


            HiddenField1.Value = s; //将需要的信息放到隐藏控件中
        }




    }
}

后台数据

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="jquepy/jquery-1.7.1.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            用户名：
        <asp:TextBox ID="TextBox1" runat="server" list="li" autocomplete="off"></asp:TextBox>
            <datalist id="li">
                <option value="123"></option>
                <option value="123"></option>
                <option value="123"></option>
                <option value="123"></option>
            </datalist>
    
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

            <asp:HiddenField ID="HiddenField1" runat="server" />


        </div>
    </form>
</body>
</html>

<script type ="text/javascript">

  
   var b = $("#HiddenField1").val();//取隐藏的值
    
   var strs = new Array();//定义数组
   strs = b.split(",");  //将字符分割
   var v = "";
   for (var i = 0; i < strs.length;i++)
   {
       v += "<option value=\"" + strs[i] + "\"> </option>";
   }

   $("#li").html(v);

    //取值 从 TextBox 中取
   $("#TextBox1").change(function () {

       var av = $("#TextBox1").val();
       $("#Label1").html(av);

   });


</script>