百度搜索自動提示搜索相關內容----模擬實現

        最近做項目，在和user 洽談時，在輸內容時提示數據庫已存在的相似內容，也就是模糊匹配。怎么實現這個功能呢?

---

       當然現在軟件開發都是講究高效，開發周期短，第一個想的是又沒相似的控件可以實現這種效果，在搜索的時候，發現百度搜、google搜不是正是我需要的效果的嗎?本着專業的思想，按下了F12。

     發現了這個：

    

想去百度的同學，抓緊了，我也要趕緊准備准備了。。。

<span class="bg s_ipt_wr"><input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off"></span><span class="bg s_btn_wr"><input type="submit" id="su" value="百度一下"/>

 看到這我比較懶，不願意在找相應的js了，自己寫吧。

 本人是做Asp.net 開發的，無奈國內很少有大公司招.net.(傷心啊）

 我的思路是這樣的。

     1》 首先必須有個輸入框<input>

     2》 把輸入的內容ajax到后台。（我使用的一般處理程式接收前台的數據）（jquery）

     3》 把數據顯示在一個DIV框中

     4》點擊選擇數據放到Input中，在然后提交。（submit）

     看我做的效果圖：

        

          好看吧，其實。。。，效果是這樣的

          

         希望大家要學好CSS  啊。。。。

Asp.Net 服務器控件使用

 

    

 不要忘記創建一般處理程式。

      控件前端代碼：

      

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="WebApplication23.WebUserControl1" %>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<style type="text/css">
    .mouseover{
        background-color: gray;
    }
  
</style>
<div  class="row" id="wrapdiv">
   
    
    <asp:TextBox runat="server" ID="txtInput" Width="150px" EnableViewState="false"></asp:TextBox>
    
</div>
<div style=" background-color:white;  ">
    <p>測試測試測試</p>
</div>
<script type="text/javascript">
    $(function () {
        var $txtinput = $("#<%=txtInput.ClientID %>");
        var $NumberHandle;//生執行的事件時間的句柄。
        //創建一個div
        var $div = $("<div style='border:solid 1px gray;z-index:1; position:absolute;background-color:white; padding:0 0;'></div>");
        $div.appendTo($("#wrapdiv"));
        //創建一個ul
        var $ul = $("<ul style='list-style-type:none;cursor:pointer; text-align:left; padding:0 0; list-style-position:hanging;'></ul>");
      
        //將此$ul添加到$div中去
        $div.append($ul);

        //將此$div顯示在$inputTxt下面位置
        var $txtinputlocation = $txtinput.offset();
        //設置$div的位置及寬度
        var $divObj = new Object();
        $divObj.Top = $txtinputlocation.top + $txtinput.outerHeight();
        $divObj.left = $txtinputlocation.left;
        var $divOuterWidth = $txtinput.outerWidth();
        $div.offset($divObj);
        $div.width(parseInt($divOuterWidth) - 2);
        $div.hide();
        $txtinput.keyup(function () {
            $div.slideDown("slow");
            $NumberHandle = setTimeout(auoTip("Handler1.ashx"), 30000);
            //設置下拉樣式。 
        });
        function auoTip(url) {
            $.getJSON(url, { "inputValue": $txtinput.val() }, function (data) {

                //清除以前綁定的數據
                $("ul li").each(function (index, element) {
                    $(element).remove();
                });
                //to-do 寫下后台數據綁定的代碼
                var $li = $(("<li style='margin: 1px 0px;'>" + data + "<li>").replace($txtinput.val(), "<em><b>" + $txtinput.val() + "</b></em>"));
                $ul.append($li);
                //為li便簽添加鼠標和點擊事件
                $("ul li").each(function (index, element) {
                    $(element).mouseover(function () {
                        $(this).addClass("mouseover");
                    });
                    $(element).mouseleave(function () {
                        $(this).removeClass("mouseover");
                    });
                    $(element).bind("click", null, function () {
                        $txtinput.val($(this).text().replace("<em><b>" + $txtinput.val() + "</b></em>", $txtinput.val()));
                        $div.slideUp("show");
                    });
                });
            });
        }
        $txtinput.keypress(function () {
         
            clearTimeout($NumberHandle);
        });
    });
   
</script>

　　

   User控件后端代碼：

    其實什么都沒喲寫，都是Microsoft 創建的。看下吧

     

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication23
{
    public partial class WebUserControl1 : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
           
        }
    }
}

　　看一般處理程式的代碼：

     

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
namespace WebApplication23
{
    /// <summary>
    /// Handler1 的摘要說明
    /// </summary>
    public class Handler1 : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string value = context.Request.Params["inputValue"].ToString()+"ooo";

            JavaScriptSerializer js = new JavaScriptSerializer();
            string Jsonvalue = js.Serialize(value);
            context.Response.Write(Jsonvalue);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

　　這里只是模擬，你可以把操作數據的代碼放到這里面來。

     好了，准備工作已經做完了，現在應該使用我們自己創建的代碼了。

      

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication23._Default" %>

<%@ Register Src="~/WebUserControl1.ascx" TagPrefix="uc1" TagName="WebUserControl1" %>


<!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>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <uc1:WebUserControl1 runat="server" id="WebUserControl1" />
    </div>
    </form>
</body>
</html>

　　最后一步，也是關鍵的一步，一定不要忘記運行啊，不然你怎么知道效果。。。。呢。