Ajax 输入框智能提示

最新推荐文章于 2022-03-26 18:53:20 发布

dota_371581

最新推荐文章于 2022-03-26 18:53:20 发布

阅读量541

点赞数

分类专栏： ASP.NET

本文链接：https://blog.csdn.net/dota_371581/article/details/22294499

版权

ASP.NET 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前台ajax调用webservice的方法从数据库取需要匹配的数据，然后动态搜索，并且显示出来。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2" %>

<!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>
    <title>ajax智能提示</title>
    <style type="text/css">
        html, body
        {
            width: 100%;
            height: 100%;
        }
        ul
        {
            padding: 0px;
            margin: 0px;
            list-style: none;
        }
        li
        {
            cursor: pointer;
            padding: 0px 5px;
            line-height: 25px;
            height: 25px;
        }
    </style>
    <script type="text/javascript" src="Scripts/jquery-1.11.0.min.js"></script>
</head>
<body>
    <form runat="server">
    输入字符串：
    <input type='text' id='txtInput' οnkeyup='getSearchKeys()' />
    <div id='divShow' style="position: absolute; z-index: 9999; width: 200px; height: auto;
        display: none; border: 1px solid #ddd">
    </div>
    </form>
</body>
<script type="text/javascript">    
    var txtInput;
    var divShow;
    window.onload = function () {
        txtInput = document.getElementById("txtInput");
        divShow = document.getElementById("divShow");
        var p = getAbsPoint(txtInput);
        divShow.style.left = p.x + 'px';
        divShow.style.top = p.y + txtInput.offsetHeight + 'px';
        txtInput.onclick = divShow.onclick = function (e) {
            e = e || event;
            var t = e.target || e.srcElement

            if (t.tagName.toLowerCase() == 'li') {
                txtInput.value = t.innerHTML;
                divShow.style.display = "none";
                return;
            }
            if (e && e.stopPropagation) {
                //W3C取消冒泡事件
                e.stopPropagation();
            } else {
                //IE取消冒泡事件
                window.event.cancelBubble = true;
            }
        };
        document.body.onclick = function (e) {
            divShow.style.display = "none";
        };
    };
    function getSearchKeys() {
        var s = txtInput.value;
        if (s == '') {
            divShow.style.display = "none";
            return;
        }
        $.ajax({
            url: "WebService1.asmx/InputTishi",
            data:{},
            type: "post",
           
            error: function (x, e) {
                alert(x.responseText);
                return false;
            },
            success: function (data) {

                var json = eval(data);
                if (json.length > 0) {
                   
                    var arr = ['<ul>'];
                    for (var i = 0; i < json.length; i++) {
                        if (json[i].indexOf(s) >= 0) {
                            arr.push('<li>' + json[i] + '</li>');
                        }
                    }

                    if (arr.length > 1) {
                        arr.push('</ul>');
                        divShow.innerHTML = arr.join('');
                        divShow.style.display = "block";
                    } else {
                        divShow.style.display = "none";
                    }
                }
            }

        }
    );

    }

    function getAbsPoint(e) {
        var x = e.offsetLeft;
        var y = e.offsetTop;
        while (e = e.offsetParent) {
            x += e.offsetLeft;
            y += e.offsetTop;
        }
        return { "x": x, "y": y };
    }
</script>
</html>

webservic方法：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using ClassLibrary1;
using System.Web.Script.Serialization;

namespace WebApplication1
{
    /// <summary>
    /// WebService1 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
    [System.Web.Script.Services.ScriptService]
    public class WebService1 : System.Web.Services.WebService
    {

        [WebMethod]
        public string HelloWorld()
        {
            return "Hello World";
        }
        [WebMethod]
        public void InputTishi()
        {
            Class1 c = new Class1();
            List<string> list = new List<string>();
            list = c.getall().Select(obj => obj.Name).ToList();
            var jdesr = new JavaScriptSerializer();
            var jsonstr = jdesr.Serialize(list);
            HttpContext.Current.Response.Write(jsonstr);
        }
    }
}

dota_371581

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax 输入框智能提示

前台ajax调用webservice的方法从数据库取需要匹配的数据，然后动态搜索，并且显示出来。 ajax智能提示 html, body { width: 100%; height: 100%; } ul { paddin
复制链接

扫一扫