asp.net + ajax 自动搜索

前台:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="manager_test" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!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>
<style type="text/css">
    .autocomplete_completionListElement
    {
    visibility : hidden;
    margin : 0px!important;
    background-color : inherit;
    color : windowtext;
    border : buttonshadow;
    border-width : 1px;
    border-style : solid;
    cursor : 'default';
    overflow : auto;
    height : 200px;
    text-align : left;
    list-style-type : none;
    }

/* AutoComplete highlighted item */

.autocomplete_highlightedListItem
{
 background-color : #def7ff;
color: black;
padding: 1px;
}

/* AutoComplete item */

.autocomplete_listItem
{
background-color : window;
color : windowtext;
padding : 1px;
}
    </style>
   
</head>
<body>
    <form id="form1" runat="server">
<div>
   
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    </div>
    <asp:TextBox ID="TextBox1" runat="server" Width="250px" autocomplete="off"></asp:TextBox>
    <ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1"
                runat="server"
                BehaviorID="AutoCompleteEx"         
                TargetControlID="TextBox1"             
                ServicePath="AutoComplete.asmx"    
                ServiceMethod="GetCompletionList"
                MinimumPrefixLength="1"                  
                EnableCaching="true"                        
                CompletionSetCount="20"                 
                CompletionListCssClass="autocomplete_completionListElement"
                CompletionListItemCssClass="autocomplete_listItem"
                CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
                DelimiterCharacters=";, :">                 
                <Animations>
                    <OnShow>
                        <Sequence>
                            <%-- Make the completion list transparent and then show it --%>
                            <OpacityAction Opacity="0" />
                            <HideAction Visible="true" />
                           
                            <%--Cache the original size of the completion list the first time
                                the animation is played and then set it to zero --%>
                            <ScriptAction Script="
                                // Cache the size and setup the initial size
                                var behavior = $find('AutoCompleteEx');
                                if (!behavior._height) {
                                    var target = behavior.get_completionList();
                                    behavior._height = target.offsetHeight - 2;
                                    target.style.height = '0px';
                                }" />
                           
                            <%-- Expand from 0px to the appropriate size while fading in --%>
                            <Parallel Duration=".4">
                                <FadeIn />
                                <Length PropertyKey="height" StartValue="0" EndValueScript="$find('AutoCompleteEx')._height" />
                            </Parallel>
                        </Sequence>
                    </OnShow>
                    <OnHide>
                        <%-- Collapse down to 0px and fade out --%>
                        <Parallel Duration=".4">
                            <FadeOut />
                            <Length PropertyKey="height" StartValueScript="$find('AutoCompleteEx')._height" EndValue="0" />
                        </Parallel>
                    </OnHide>
                </Animations>
            </ajaxToolkit:AutoCompleteExtender>
 
    </form>
</body>
</html>

asmx:

<%@ WebService Language="C#" Class="AutoComplete" %>

using System;
using System.Collections;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Configuration;
using System.Data;
using System.Collections.Generic;

/// <summary>
///AutoComplete 的摘要说明
/// </summary>
[System.Web.Script.Services.ScriptService]
public class AutoComplete : System.Web.Services.WebService {

    public AutoComplete () {

        //如果使用设计的组件,请取消注释以下行
        //InitializeComponent();
    }

    [WebMethod]
    public string[] GetCompletionList(string prefixText)
    {

        DataTable tbl = DBHelper.getDataTable("select words from searchwords where words like '%"
            + prefixText + "%'");
       
        List<string> items = new List<string>();
        foreach (DataRow dr in tbl.Rows)
        {
            items.Add(dr["words"].ToString());
        }
        return items.ToArray();
    }   
}

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的示例代码,实现了在ASP.NET网页中使用Echarts饼图,并添加了提示框自动轮播的功能: ```html <!-- 引入Echarts和jQuery库 --> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- 在HTML中添加一个div元素,用于显示饼图 --> <div id="chart" style="width:600px;height:400px;"></div> <script> // 定义饼图数据 var data = [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ]; // 初始化Echarts图表 var chart = echarts.init(document.getElementById('chart')); // 配置饼图参数 var option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 10, data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] }, series: [ { name: '访问来源', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, labelLine: { show: false }, data: data } ] }; // 设置自动轮播效果 var currentIndex = -1; setInterval(function () { var dataLen = option.series[0].data.length; // 取消之前高亮的图形 chart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: currentIndex }); currentIndex = (currentIndex + 1) % dataLen; // 高亮当前图形 chart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: currentIndex }); // 显示提示框 chart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: currentIndex }); }, 2000); // 在图表中显示数据 chart.setOption(option); </script> ``` 在以上代码中,我们首先定义了一个饼图的数据,然后通过Echarts库初始化了一个图表,并配置了饼图的参数。接着,我们使用`setInterval`函数实现了提示框自动轮播的效果,每隔一段时间高亮下一个饼图区块,并显示对应的提示框。最后,我们将配置好的参数应用到图表中,通过`setOption`函数显示数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值