关于类似google 模糊提示的功能

不是有这个一个ajax控件的么结合webserivce使用的

这是一个自己写的js 不是很完善 <script type="text/javascript" language="javascript">
        var xmlHttp;

        function createXMLHTTP()
        {
            if(window.XMLHttpRequest)
            {
                xmlHttp=new XMLHttpRequest();//mozilla浏览器
            }
            else if(window.ActiveXObject)
            {
                try
                {
                    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");//IE老版本
                }
                catch(e)
                {}
                try
                {
                    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//IE新版本
                }
                catch(e)
                {}
                if(!xmlHttp)
                {
                    window.alert("不能创建XMLHttpRequest对象实例！");
                    return false;
                }
            }
        }

        function GetTitle()
        {
            //alert(document.getElementById("TextBox1").value);
            if(document.getElementById("TextBox1").value!=null && document.getElementById("TextBox1").value!="")
            {
                createXMLHTTP();
                var url="SelectTitle.aspx?title="+enCode(document.getElementById("TextBox1").value);
                xmlHttp.open("GET",url,true);
                xmlHttp.onreadystatechange=ShowTitles;
                xmlHttp.send(null);
            }
        }

        var count;
        var i=0;

        function TxtKeyDow()
        {
            if(i==0 && event.keyCode==40)
            {
                document.getElementById("div0").focus();
                document.getElementById("div1").style.background="#0066ff";
                i=1;
            }
        }

        function KeyDow()
        {
            //向下
            if(event.keyCode==40 && i<count)
            {
                document.getElementById("div"+""+(i+1)+"").style.background="#0066ff";
                document.getElementById("div"+""+i+"").style.background="#FFFFFF";
                i=i+1;
            }
            //向上
            if(event.keyCode==38 && i>1)
            {
                document.getElementById("div"+""+(i-1)+"").style.background="#0066ff";
                document.getElementById("div"+""+i+"").style.background="#FFFFFF";
                i=i-1;
            }
            //回车
            if (event.keyCode==13)
            {
                document.getElementById("TextBox1").value=document.getElementById("div"+""+i+"").innerText;
                document.getElementById("TextBox1").focus();
                div0.style.display="none";
                i=0;
            }
        }

        //执行回调函数
        function ShowTitles()
        {
            if(xmlHttp.readyState==4)
            {
                //alert(xmlHttp.status);
                //alert(xmlHttp.responseText);
                if(xmlHttp.status==200)
                {
                    if(xmlHttp.responseText!=null && xmlHttp.responseText!="")
                    {
                        i=0;
                        div0.style.display="";
                        var text=xmlHttp.responseText;
                        count=text.substring(text.lastIndexOf(">")+1);
                        var title=text.substring(0,text.lastIndexOf(">")+1);
                        document.getElementById("div0").innerHTML=title;
                    }
                }
            }
        }


        //处理中文转码
        function enCode(chineseStr)
        {
            return escape(chineseStr,'utf-8');
        }

        //使回车提交失效
        function document.onkeydown()
        {
             if(event.keyCode == 13)
             {
                 event.returnValue = false;
             }
        }
    </script>

输入d联想出d1
输入dd联想出dd1 dd2
。。
Index.html文件:
<html>
<head>
<script>
var xmlHttp;
function createXMLHttpRequest()
{
    if(window.ActiveXObject)
    {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest)
    {
        xmlHttp = new XMLHttpRequest();
    }
}
function startRequest(data)
{
    createXMLHttpRequest();
    try
    {
        xmlHttp.onreadystatechange = function(){handleStateChange(data);}
        xmlHttp.open("GET", "data.xml", true);
        xmlHttp.send(null);
    }
    catch(exception)
    {
        alert("xmlHttp Fail");
    }
}
function handleStateChange(data)
{
    if(xmlHttp.readyState == 4)
    {
        if (xmlHttp.status == 200 || xmlHttp.status == 0)
        {
            var root = xmlHttp.responseXML.documentElement;
            try
            {
                var info = root.getElementsByTagName(data)[0];
                var text = info.firstChild.nodeValue;
                var array = text.split("-");
                var obj = document.getElementById("div1");
                obj.style.display = "block";
                obj.innerHTML = "";
                for(var i=0; i<array.length; i++)
                {
                    obj.innerHTML = obj.innerHTML + "<span style='display:block' onclick='spanClick()' onmouseover='spanMouseOver()'>" + array[i] + "</span>";
                }
            }
            catch(exception)
            {
                var obj = document.getElementById("div1");
                obj.style.display = "block";
                obj.innerHTML = "";
            }
        }
    }
}
function textChange(data)
{
    if(data == "")
    {
        var obj = document.getElementById("div1");
        obj.style.display = "block";
        obj.innerHTML = "";
    }
    else
    {
         startRequest(data);
    }
}
function spanClick()
{
    var spanObj=event.srcElement;
    var textObj = document.getElementById("text1");
    textObj.value = spanObj.innerHTML;
    var divObj = document.getElementById("div1");
    divObj.style.display = "none";
    divObj.innerHTML = "";
}
var oldSpanObj;
function spanMouseOver()
{
    if(oldSpanObj != null)
    {
        oldSpanObj.style.backgroundColor = "#FFFFFF";
    }
    var spanObj=event.srcElement;
    spanObj.style.backgroundColor = "#FF7788";
    oldSpanObj = spanObj;
}
</script>
</head>
<body>
<input type="text" id="text1" onpropertychange="textChange(this.value);" />
<br>
<div id="div1" style="border:1px solid #8877EE;display:none;position:absolute;width:146;background-color:#EEFFFF">
</div>
</body>
</html>data.xml文件:
<?xml version="1.0" encoding="GB2312"?>
<root>
    <d>d1</d>
    <dd>dd1-dd2</dd>
    <ddd>ddd1-ddd2-ddd3</ddd>
    <dddd>dddd1-dddd2-dddd3-dddd4</dddd>
    <ddddd>ddddd1-ddddd2-ddddd3-ddddd4-ddddd5</ddddd>
</root>

不是啥大问题
ajax就可以了不过有两个关键问题
1你的服务器网速如何，goolge是大型分布服务器，而且用的是自己的高速数据库，就是这样有时候提示速度都跟不上。
2信息评价聚类标准，按google的词库来说，从一个超大的词库提取“最有价值的词”，那这个“价值”评判体系就比较关键了

AJAX实现google输入自动完成的简单模拟

比较简单的模拟,文本框输入CompanyName,然后搜索SqlServer2000 里NorthWind数据库 Suppliers表的CompanyName字段,然后实现自动完成四个文件
1 .AutoComplete.htm<!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>输入自动完成</title>
    <script language="javascript">
        //输入信息的文本框
        var txtInput;
        //下拉表当前选中项的索引
        var currentIndex = -1;

        //初始化参数,和下拉表位置
        function initPar()
        {
             txtInput = document.getElementById("txtCompanyName");
             //设置下拉表相对于文本输入框的位置
             setPosition();
        }

        //设置下拉表相对于文本输入框的位置
        function setPosition()
        {
            var width = txtInput.offsetWidth;
            var left = getLength("offsetLeft");
            var top = getLength("offsetTop") + txtInput.offsetHeight;

            divContent.style.left = left + "px";
            divContent.style.top = top + "px";
            divContent.style.width = width + "px";
        }

       //获取对应属性的长度
        function getLength(attr)
        {
            var offset = 0;
            var item = txtInput;
            while (item)
            {
                offset += item[attr];
                item = item.offsetParent;
            }
            return offset;
        }         //自动完成
        function autoComplete()
        {
            //如果按下向上, 向下或回车
            if (event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 13)
            {
                //选择当前项
                selItemByKey();
            }
            else //向服务器发送请求
            {
                //如果值为空
                if (txtInput.value == "")
                {
                    divContent.style.display='none';
                    return;
                }
                //恢复下拉选择项为 -1
                currentIndex = -1;                 //开始请求
                requestObj = new ActiveXObject("Microsoft.XMLHTTP");
                requestObj.onreadystatechange = displayResult;
                requestObj.open("POST", "AutoComplete.aspx?ts=" + new Date().toLocaleString(), true);
                requestObj.send(txtInput.value);
            }
        }

        //显示结果
        function displayResult()
        {
             if (requestObj.readyState == 4)
             {
                     showData();
                     divContent.style.display = "";
             }
        }

        //显示服务器返回的结果 ,并形成下拉表
        function showData()
        {
             //获取数据
             var doc = new ActiveXObject("MSXML2.DOMDocument.3.0");
             doc.loadXML(requestObj.responseText);

             //显示数据的xslt
             var docStyle = new ActiveXObject("MSXML2.FreeThreadedDOMDocument");
             docStyle.async = false;
             docStyle.load("list.xslt");

             var docTemplate = new ActiveXObject("MSXML2.XSLTemplate");
             docTemplate.stylesheet = docStyle;

             //通过xslt转换xml数据
             var processor = docTemplate.createProcessor();
             processor.input = doc;
             processor.transform();
             var res = processor.output;

             //显示转后后的结果
             divContent.innerHTML = res;
        }

        //通过键盘选择下拉项
        function selItemByKey()
        {
            //下拉表
            var tbl = document.getElementById("tblContent");
            if (!tbl)
            {
                return;
            }
            //下拉表的项数
            var maxRow = tbl.rows.length;
            //向上
            if (event.keyCode == 38 && currentIndex > 0)
            {
                 currentIndex--;
            }
            //向下
            else if (event.keyCode == 40 && currentIndex < maxRow-1)
            {
                 currentIndex++;
            }
            //回车
            else if (event.keyCode == 13)
            {
                selValue();
                return;
            }

            clearColor();
            txtInput.value = tbl.rows[currentIndex].innerText;
            //设置当前项背景颜色为blue 标记选中
            tbl.rows[currentIndex].style.backgroundColor = "InfoBackground";
        }

        //清除下拉项的背景颜色
        function clearColor()
        {
             var tbl = document.getElementById("tblContent");
             for (var i = 0; i < tbl.rows.length; i++)
             {
                    tbl.rows[i].style.backgroundColor = "";
             }
        }

        //选择下拉表中当前项的值 ,用于按回车或鼠标单击选中当前项的值
        function selValue()
        {
            if (event.keyCode != 13)
            {
                var text = event.srcElement.innerText;
                txtInput.value = text;
            }
            initList();
        }

        //文本框失去焦点时设置下拉表可见性
        function setDisplay()
        {
            //获取当前活动td的表格
            if (document.activeElement.tagName == "TD")
            {
                 var tbl = document.activeElement.parentElement.parentElement.parentElement;
                //如果不是下拉表,则隐藏下拉表
                if (tbl.id != "tblContent")
                {
                    initList();
                }
                return;
            }

            initList();

        }

        function initList()
        {
            divContent.style.display='none';
            divContent.innerHTML = "";
            currentIndex = -1;
        }
    </script>

</head>
<body onload="initPar()">
CompanyName<input type="text" id="txtCompanyName" onkeyup="autoComplete()" onblur="setDisplay();" style="width:400px"/>

<div id="divContent" style="display:none; position:absolute; ">
</div>
</body>
</html>
AutoComplete.aspx<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AutoComplete.aspx.cs" Inherits="AJAXBaseHome.AutoComplete" %>
AutoComplete.aspx.csusing System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Collections;
using System.IO;
using System.Text;
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;
using System.Web.Configuration;namespace AJAXBaseHome
{
    public partial class AutoComplete : System.Web.UI.Page
    {
        private static string conString = WebConfigurationManager.ConnectionStrings["myData"].ConnectionString;        protected void Page_Load(object sender, EventArgs e)
        {
            string input = GetInput();
            Response.Write(GetCompanyName(input));
        }        //获取输入的字符串
        private string GetInput()
        {
            Stream s = Request.InputStream;
            int count = 0;
            byte[] buffer = new byte[1024];
            StringBuilder builder = new StringBuilder();
            while ((count = s.Read(buffer, 0, 1024)) > 0)
            {
                builder.Append(Encoding.UTF8.GetString(buffer, 0, count));
            }            return builder.ToString();
        }        private string GetCompanyName(string input)
        {
            using (SqlConnection con = new SqlConnection(conString))
            {
                SqlCommand command = new SqlCommand("select * from suppliers where CompanyName like @Name", con);
                command.Parameters.Add(new SqlParameter("@name", input + "%"));
                SqlDataAdapter adapter = new SqlDataAdapter(command);
                DataSet ds = new DataSet();
                adapter.Fill(ds);
                return ds.GetXml();
            }
        }
    }
}
xslt文件用于显示xml数据<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html"/>
  <xsl:template match="/">
    <xsl:apply-templates/>
  </xsl:template>
  <xsl:template match="NewDataSet">
    <table id="tblContent" style="background-color:GrayText">
    <xsl:for-each select="Table">
      <tr>
        
        <td onclick="selValue()" style="cursor:hand" onmouseover="clearColor();this.parentElement.style.backgroundColor='InfoBackground'" onmouseout="clearColor()">
          <xsl:value-of select="CompanyName"/>
        </td>
      </tr>
    </xsl:for-each>
    </table>
  </xsl:template>
</xsl:stylesheet>

调试易

关于类似google 模糊提示的功能

解决方案 »