zoukankan      html  css  js  c++  java
  • 小试JQuery的AutoComplete插件

    在项目制作中,有时候需要向用户提供一定的帮助信息来提示用户的操作,当然,suggest功能是必不可少的,但是自己开发的话,是比较费时费事的,这里就直接拿JQuery的autocomplete来用吧, 实验证明,效果很好:

    前台代码如下:

    <%@ 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>JQuery的自动完成功能</title>
        <script src="jquery.autocomplete/jquery-autocomplete/lib/jquery.js" type="text/javascript"></script>
        <script src="jquery.autocomplete/jquery-autocomplete/jquery.autocomplete.min.js" type="text/javascript"></script>
        <link href="jquery.autocomplete/jquery-autocomplete/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
        <script src="jquery.autocomplete/jquery-autocomplete/demo/localdata.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                raiseEvent();
            });
            
            //请求完成,被回调的函数
            function rServer(arg, context) {
                eval(arg);
                $("#sugest").focus().autocomplete(data);
            }
            
            //向服务器端发起数据处理请求
            function raiseEvent(arg, context) 
            {    
               <%=ClientScript.GetCallbackEventReference(this,"arg","rServer","context") %>; 
            } 
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <input type="text" name="text" id="sugest" style="200px" />
        </div>
        </form>
    </body>
    </html>
    

    然后就是后台代码,当然了,这里只是模拟数据:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Text;
    
    public partial class _Default : System.Web.UI.Page,ICallbackEventHandler
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
    
            }
        }
    
        private StringBuilder GenStr()
        {
            StringBuilder sbStr = new StringBuilder();
            sbStr.Append("var data = ");
            sbStr.Append("[");
            sbStr.Append("\"Aback\",");
            sbStr.Append("\"back\",");
            sbStr.Append("\"cback\",");
            sbStr.Append("\"english\",");
            sbStr.Append("\"confidence\",");
            sbStr.Append("\"diligent\",");
            sbStr.Append("\"honor\",");
            sbStr.Append("\"delicious\"");
            sbStr.Append("];");
            return sbStr;
        }
    
        public string GetCallbackResult()
        {
            return GenStr().ToString();
        }
    
        public void RaiseCallbackEvent(string eventArgument)
        {
    
        }
    
    } 
    
  • 相关阅读:
    Windows Server 2016-安装AD域服务注意事项
    Windows Server 2016-WinSer2016 Active Directory新增功能
    Windows Server 2016-Active Directory域服务概述
    MDT 2013 从入门到精通之概念扫盲
    SpringBoot | 第五章:多环境配置
    SpringBoot | 第四章:日志配置(转)
    SpringBoot | 第三章:springboot配置详解
    SpringBoot | 第二章:lombok介绍及简单使用
    SpringBoot | 第零章:前言
    转自IBM:Apache HTTP Server 与 Tomcat 的三种连接方式介绍
  • 原文地址:https://www.cnblogs.com/scy251147/p/2034650.html
Copyright © 2011-2022 走看看