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

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

 

 

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">

                <optionvalue="123"></option>

                <optionvalue="123"></option>

                <optionvalue="123"></option>

                <optionvalue="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>

页面展示
图片

转载于:https://www.cnblogs.com/CCDS01/p/7865948.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ajax模仿google提示输入框 使用说明 v1.8 本程序由飞飞asp乐园编写 ************************************************* 特别感谢: 一杯白开水 网友 的帮助 版本所提的修改建议 ************************************************* 飞飞Asp乐园 www.ffasp.com QQ:276230416 QQ:72840059 ********************************************* 程序介绍: 本程序官网演示地址:http://www.ffasp.com/content.asp?newsid=1376 转载请注明出处 此小程序是模仿Google(sgguest)输入提示框所编写 亦可用于用户注册邮箱时的提示 此程序使用方便简单、易用灵活 且不限Asp、php、net 更新说明: 1.支持xhtml 2.兼容IE6,IE7,FF 3.支持input显示与value分离【以隐藏域方式提交数据】 4.支持下拉框按钮 5.支持显示结果数量 6.可以一个页面多次使用 7.模拟下拉框不会被select遮挡 8.调用更方便(内核已改为jq插件) 9.皮肤修改方便 ,外置的css样式文件,带有注释说明,任意修改 10.支持键盘方向键按住不放选择 11.解决了延时卡死的现象 12.解决了在有滚动条时,ie6下被表单遮挡的问题 13.支持回调函数。当该插件执行完毕时,执行另外一个指定函数 ######V1.7解决问题############ 14.可以自己设置提示框的长度 15.解决了无法获取用户填写默认值的问题 16.当输入框失去焦点时,提示框会自动隐藏 ######V1.8解决问题############ 17.解决了鼠标无法选择的问题 ****************************************************************** 文件使用说明: 在需要使用的页面首先要引用2个js文件 <script src="jquery1.2.6.min.js"></script> <script src="search_suggest.js"></script> 此二文件必须放于调用函数之前 *****************************以下是调用示例*************************: var option = { inputName : "test2", inputText : "测试字符串4", inputValue: "我是值", inputlength:1, url : "search.asp", arrow :1, arrowUrl :"search.asp?aa=nowitest", zIndex:7, fns:function(){alert(3)} } $("#test").suggestShow(option) +++++++解释说明+++++++++++++++++++++++++++++++++++++++++++++++++++++++++ option:为参数设置对象。option内的所有参数可以省略 inputName 表单input的name.即 提交时获取input的name。也为search.asp页面获取input的name inputText inputName 所显示的数据 inputValue inputName 所提交的数据,当inputValue省略时,inputValue则与inputText相等 url 远程执行获取数据的url arrow 模仿select,使用下拉按钮。固定值。为1则显示下拉箭头 为0则不显示 arrowUrl 当arrow为1时 ,默认情况下点击下拉按钮所执行的远程搜索页面 zIndex z-index值 inputlength inputName中输入数据的最小长度 suggestWidth 提示框的长度 fns 当执行完该插件时,执行的回调函数 ************************************************************************ search.asp页面介绍: 该页面返回数据必须是xml格式,输出数据数据必须符合以下格式 <response value="1" result ="共2个结果">显示信息</response> 属性介绍: 1.value aa的value值,可以不填。不填value值则取"显示信息" 2.result 显示远程获取的统计结果,可以不填。 3.显示信息 即aa的显示值text值 ************************************************************************

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值