首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Ajax >

求 百度智能提示框原理,该怎么解决

2013-01-01 
求 百度智能提示框原理百度的智能提示大家已经知道了,但是我不太懂他的原理。现在有一个想法:我在文本框里

求 百度智能提示框原理
百度的智能提示大家已经知道了,但是我不太懂他的原理。现在有一个想法:
我在文本框里输入了文字,把百度的智能提示框里提示的内容全都显示出来。
ag:我输入了新闻,把下拉框里“新闻网、新闻联播。。”等值全部保存起来怎么做。

[解决办法]
学习一下prototype那个框架和jQuery差不多的很容易实现自动补全 ,看一下就ok了 自己搜吧!
http://search.download.csdn.net/search/prototype也不要你搜了 就这些吧
[解决办法]

引用:
可能是我说的不够清楚吧,我是说我要取百度里下拉菜单里的值。是百度里的下拉菜单值。不是我自己数据库里的。我在文本框里输入字符串以后,把百度返回给用户的下拉单里的值保存到数据库

baidu在客户端循环生成div(这些div一定是有一定规律的,并不同于其他区域的div),你只要获取这些div的innerHTML就行了,然后插入数据库中
[解决办法]
要自己写起来还真是有那么一点点麻烦~尤其是调效果。

function change(sword){
highlight=-1;
var url = "/searchAjax.asp?q=" + sword + "&\r\=" + Math.random();
ajax.get( 
url,
function(obj) {
if (obj.responseText=="err30"){
set($("sAlert"),"");
$("sAlert").style.display="none";
}
else
{
set($("sAlert"),obj.responseText);
$("sAlert").style.display="block";
                                                return true;
}
}
);
}

function hideSword(){
if(getFocus==false){
set($("sAlert"),"");
$("sAlert").style.display="none";
                                highlight=-2;
}else{
return true;
}
}

function S(OBJ){
$('searchword').value=OBJ.innerHTML;
$('sAlert').style.display='none';
$('formsearch').submit();
}

function checkKey(e,sword){
if(e.keyCode==13){
$('sAlert').style.display='none';
check();
}else if(e.keyCode==40){
if(highlight==-2){change(sword);return false;}
highlight++;
var total = $('sTab').rows.length-1;
if(highlight>total){highlight=0;}
for(i=0;i<=total;i++){
if(i==highlight){
$('sTab').rows[i].style.background='#1181bf';
$('sTab').rows[i].style.color='#FFFFFF';
$('searchword').value=$('sTab').rows[i].cells[0].innerHTML;
} else {
$('sTab').rows[i].style.background='#FFFFFF';
$('sTab').rows[i].style.color='#000000';
}
}
}else if(e.keyCode==38){
highlight--;
var total = $('sTab').rows.length-1;
if(highlight<0){highlight=total;}
for(i=0;i<=total;i++){
if(i==highlight){
$('sTab').rows[i].style.background='#1181bf';
$('sTab').rows[i].style.color='#FFFFFF';
$('searchword').value=$('sTab').rows[i].cells[0].innerHTML;
} else {
$('sTab').rows[i].style.background='#FFFFFF';
$('sTab').rows[i].style.color='#000000';
}
}
if(highlight<0){highlight=0}
}else{change(sword);}
}



<input type="text" name="searchword" id="searchword" onkeyup="checkKey(event,this.value);" onblur="hideSword();" onclick="this.style.color='#000';if(this.value=='想找\'暮光之城3\'?试着输入\'mgzc3\'吧!') this.value='';" value="想找'暮光之城3'?试着输入'mgzc3'吧!" maxlength="26" autocomplete="off" />




参考地址:http://www.3030.tv
[解决办法]
 搜索建议(Searching Suggestion),已布置好样式

大家应该都看到过 GOOGLE 的搜索建议,就是当我们在输入关键词时,GOOGLE 会根据我们目前已输入的字显示相关的关键字建议,这就是搜索建议,现在很多网站都实现该友好的功能,如 YAHOO、狗狗搜索等。 

实现该功能的思路就是: 
在关键字输入框里,当用户按键弹起时,发送输入框里的字符串到服务器。 
服务器根据收到客户端发来的字进入匹配搜索 
将匹配用户已输入字的记录回发到客户端 
客户端收到服务端的响应,输出建议。 

其实就是异步回发(AJAX)。 

下面是一个实例,实例实现的是搜索 SQL Server 默认数据库 Northwind 表 Customers 字段 CustomerID,当用户要输入框输入字时,返回该字段值与用户输入的字开头匹配的记录,即 CustomerID LIKE '用户已输入的字%'。 

样式已设置好,显示建议的行为绝对位置,所以该行不会显示网页上的内容。 

文件名:WordSuggest.aspx 

源码如下: 

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

<!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">
    .CInput{border:solid 1px gray;width:300px}
    #divSuggestions{border:solid 1px gray;width:300px;background:#fff;visibility:hidden}
    #divSuggestions span{display:block;padding:3px}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <h1>搜索建议 DEMO</h1>
    <span>http://www.code-studio.net </span>
    <hr />
    <table style="border-collapse:collapse;"><tr><td><asp:TextBox ID="txtInput" runat="server" CssClass="CInput" onkeyup="sendRqt(this)"></asp:TextBox>
    <asp:Button ID="Button1" runat="server" Text="Submit" /></td></tr>
    <tr style="position:absolute;"><td><div id="divSuggestions"></div></td></tr></table>
    </div>
    </form>
    <script type="text/javascript">
    var xhr;
    var isIe=window.navigator.appName.indexOf("Netscape") == -1?true:false;

    function $(sElmId){return document.getElementById(sElmId);}
    function crtRqt(){
        if(window.ActiveXobject)
            xhr=new ActiveXObject("Microsoft.XMLHTTP");
        else xhr=new XMLHttpRequest();
    }
    function sendRqt(srcElm){
        var sInput=srcElm.value;
        if(sInput!=""){
            var url="wordsuggest.aspx?t="+new Date().getTime()+"&w="+sInput;
            crtRqt();
            xhr.onreadystatechange=hdlRsp;
            xhr.open("GET",url,true);


            xhr.send(null);
        }
        else $("divSuggestions").style.visibility="hidden";
    }
    function hdlRsp(){
        if(xhr.readyState==4&&xhr.status==200){
            var rspText=xhr.responseText;
            var oDiv=$("divSuggestions");
            if(rspText!=""){
                var arrRspText=xhr.responseText.split(',');
                var sInnerHtml="";
                for(var i=0;i<arrRspText.length;++i){
                    sInnerHtml+="<span onmouseover='setStyle(this,true)' onmouseout='setStyle(this,false)'"
                                +" onclick='setInput(this)'>"+arrRspText[i]+"</span>";
                }
                oDiv.innerHTML=sInnerHtml;
                oDiv.style.visibility="visible";
            }
            else oDiv.style.visibility="hidden";
        }
    }
    function setStyle(srcElm,bOver){
        srcElm.style.background=bOver?"orange":"";
    }
    function setInput(srcElm){
        $("<%=txtInput.ClientID %>").value=srcElm.innerHTML;
    }
    </script>
</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;
using System.Data.SqlClient;

public partial class WordSuggest : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string strInput = string.IsNullOrEmpty(Request.QueryString["w"]) ? string.Empty : Request.QueryString["w"];
        if (strInput.Trim().Length != 0)
        {
            Suggeste(strInput);
        }
    }

    private void Suggeste(string originalStr)


    {
     /* 搜索建议
      * 文件名: WordSuggest.aspx
      * 功能描述: 根据用户输入,在数据库 Northwind 的表 Customers 查找 CustomerID 字段值匹配的记录.
      */
        SqlConnection conn = new SqlConnection("data source=localhost;database=northwind;user id=sa;password=你的密码");
        string cmdText = "SELECT TOP 10 CustomerID FROM Customers WHERE CustomerID LIKE @w";
        SqlParameter para = new SqlParameter("@w", string.Format("{0}%", originalStr));
        SqlCommand cmd = new SqlCommand();
        cmd.Connection = conn;
        cmd.CommandText = cmdText;
        cmd.Parameters.Add(para);
        conn.Open();
        SqlDataReader reader = cmd.ExecuteReader();
        System.Text.StringBuilder sb = new System.Text.StringBuilder();
        while (reader.Read())
        {
            sb.AppendFormat("{0},", reader[0]);
        }
        reader.Close();
        conn.Close();
        Response.ContentType = "text/plain";
        Response.Clear();
        if (sb.Length != 0)
        {
            Response.Write(sb.ToString().Remove(sb.Length - 1));
        }
        else
        {
            Response.Write(string.Empty);
        }
        Response.Flush();
        Response.Close();
    }
}



本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/windows2000/archive/2010/08/14/5812323.aspx
[解决办法]
ajax有个自动补全的控件,建个webservice文件,实现模糊查询控件名好像是autocomplete,具体我既不清楚了,再增加控件里面的属性就可以了

热点排行