zoukankan      html  css  js  c++  java
  • mootools实现搜索提示文本框

     听一网友问怎么做一个像Google搜索一样,写入搜索关键字就提示相关信息。前两天有点时间,就想自己去做做看,现在完成了提示的功能。代码如下:
    mootools框架:https://files.cnblogs.com/mimengjiangnan/mootools-release-1.11.js
    HTML代码:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxTextBox.aspx.cs" Inherits="AjaxTextBox" %>

    <!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>AjaxTextBox</title>
        <script type="text/javascript" src="mootools-release-1.11.js" ></script>
        <script type="text/javascript" >
        var values;
        window.addEvent("domready",function(){
           
            $("ajaxtextbox").addEvent("keypress",function(e){
                var keychar;
                var keynum;
                if(window.event) // IE
                {
                    if(window.event.keyCode==8){//判断Backspace键
                        values=values.substr(0,values.length-1);
                        $("ajaxtextbox").value=values;
                    }
                    keynum = window.event.keyCode;
                }
                else if(e.which) // Netscape/Firefox/Opera
                {
                    if(e.which==8){
                        values=values.substr(0,values.length-1);
                        $("ajaxtextbox").value=values;
                    }
                    keynum = e.which;
                }
               
                keychar = String.fromCharCode(keynum);
                if(/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(keychar)){//判断是不是中文,英文,数字
                    $("ajaxtextbox").value+=keychar;
                    values=$("ajaxtextbox").value;
                }
                if($("ajaxtextbox").value==""){
                    return;
                }
                var url="AjaxTextBox.aspx?value="+$("ajaxtextbox").value;
                new Ajax(url,{method:'post',
                    onComplete:function(){
                        $("msg").innerHTML=this.response.text;
                        if($("ajaxtextbox").value.length>values.length){
                            $("ajaxtextbox").value=values;
                        }
                    }
                }).request();
            });

        });
               
            function getMsg(obj){
                $("ajaxtextbox").value=obj.innerHTML;
                $("msg").innerHTML="";
            }
        </script>
    </head>
    <body>
    <input type="text" id="ajaxtextbox" name="ajaxtextbox"  style="170px;" runat="server" />
    <div id="msg" style="170px;"></div>
    </body>
    </html>


    .CS代码:

    using System;
    using System.Data;
    using System.Configuration;
    using System.Collections;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;

    public partial class AjaxTextBox : System.Web.UI.Page
    {
        public static DataTable dt = new DataTable();
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                if (dt.Rows.Count == 0)
                {
                    dt.Columns.Add("cotents");
                    DataRow dr = dt.NewRow();
                    dr[0] = "0a2b3c";
                    DataRow dr1 = dt.NewRow();
                    dr1[0] = "0e2f3g";
                    dt.Rows.Add(dr);
                    dt.Rows.Add(dr1);
                }
            }
            if (!String.IsNullOrEmpty(Request["value"]))
            {
                Seach(Request["value"]);

            }
        }
        protected void Seach(string value)
        {
            string seach = "<div style=\"170px; background-color:InfoBackground;\" ;>";
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                if(dt.Rows[i]["cotents"].ToString().StartsWith(value.Trim()))
                {
                    seach += "<div  style=\"170px; cursor:pointer;\"  onclick=\"getMsg(this)\" >" + dt.Rows[i]["cotents"].ToString() + "</div>";
                }
            }
            seach += "</div>";
            Response.Clear();
            Response.Write(seach);
            Response.End();
        }
    }

  • 相关阅读:
    LeetCode 516. Longest Palindromic Subsequence
    LeetCode 432. All O`one Data Structure
    LeetCode 450. Delete Node in a BST
    LeetCode 460. LFU Cache
    LeetCode 341. Flatten Nested List Iterator
    LeetCode 381. Insert Delete GetRandom O(1)
    LeetCode 380. Insert Delete GetRandom O(1)
    LintCode Coins in a Line III
    LintCode Coins in a Line II
    LintCode Coins in a Line
  • 原文地址:https://www.cnblogs.com/mimengjiangnan/p/953312.html
Copyright © 2011-2022 走看看