asp.net + ajax 自动搜索

最新推荐文章于 2021-08-05 12:58:03 发布

xc008

最新推荐文章于 2021-08-05 12:58:03 发布

阅读量613

点赞数

分类专栏： ajax 文章标签： asp.net ajax autocomplete textbox webservice server

本文链接：https://blog.csdn.net/xc008/article/details/3326845

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前台:

<%@ 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();
    }
}

xc008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
asp.net + ajax 自动搜索

前台:http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> 无标题页 .autocomplete_completionListElement { visibility : hidden; margin : 0px!important
复制链接

扫一扫

专栏目录