仿Google自动提示 SearchSuggess代码,Asp.Net代码库,德仔网

代码语言
代码分类
【Asp.Net】仿Google自动提示 SearchSuggess
作者:曾祥展 / 发布于2011/3/15/ 703

<div>
<font color="#ff8000">页面：</font>
<pre class="code"><span style="background: rgb(255,238,98)"><%<span style="color: blue">@ </span><span style="color: rgb(163,21,21)">Page </span><span style="color: red">Language</span><span style="color: blue">="C#" </span><span style="color: red">AutoEventWireup</span><span style="color: blue">="true"  </span><span style="color: red">CodeFile</span><span style="color: blue">="Default.aspx.cs" </span><span style="color: red">Inherits</span><span style="color: blue">="_Default" </span><span style="background: rgb(255,238,98)">%>


</span><span style="color: blue"><!</span><span style="color: rgb(163,21,21)">DOCTYPE </span><span style="color: red">html PUBLIC </span><span style="color: blue">"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<</span><span style="color: rgb(163,21,21)">html </span><span style="color: red">xmlns</span><span style="color: blue">="http://www.w3.org/1999/xhtml">
<</span><span style="color: rgb(163,21,21)">head </span><span style="color: red">runat</span><span style="color: blue">="server">
    <</span><span style="color: rgb(163,21,21)">title</span><span style="color: blue">></span>seach<span style="color: blue"></</span><span style="color: rgb(163,21,21)">title</span><span style="color: blue">>
    <</span><span style="color: rgb(163,21,21)">script </span><span style="color: red">type</span><span style="color: blue">="text/javascript"  </span><span style="color: red">src</span><span style="color: blue">="jquery.min.js" ></</span><span style="color: rgb(163,21,21)">script</span><span style="color: blue">>
     <</span><span style="color: rgb(163,21,21)">script </span><span style="color: red">type</span><span style="color: blue">="text/javascript" </span><span style="color: red">src</span><span style="color: blue">="js.js"></</span><span style="color: rgb(163,21,21)">script</span><span style="color: blue">>
    <</span><span style="color: rgb(163,21,21)">link </span><span style="color: red">href</span><span style="color: blue">="css.css" </span><span style="color: red">rel</span><span style="color: blue">="stylesheet" </span><span style="color: red">type</span><span style="color: blue">="text/css" />    
    </</span><span style="color: rgb(163,21,21)">head</span><span style="color: blue">>
<</span><span style="color: rgb(163,21,21)">body</span><span style="color: blue">>
    <</span><span style="color: rgb(163,21,21)">form </span><span style="color: red">id</span><span style="color: blue">="form1" </span><span style="color: red">runat</span><span style="color: blue">="server">
  
    
        <</span><span style="color: rgb(163,21,21)">div </span><span style="color: red">onClick</span><span style="color: blue">="keyup_close();">
        <</span><span style="color: rgb(163,21,21)">ul</span><span style="color: blue">>
          <</span><span style="color: rgb(163,21,21)">li </span><span style="color: red">class</span><span style="color: blue">="h_14">
        <</span><span style="color: rgb(163,21,21)">iframe </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">DISPLAY</span>: <span style="color: blue">none" </span><span style="color: red">id</span><span style="color: blue">="if_keyup" </span><span style="color: red">name</span><span style="color: blue">="if_keyup"></</span><span style="color: rgb(163,21,21)">iframe</span><span style="color: blue">>
        <</span><span style="color: rgb(163,21,21)">input </span><span style="color: red">id</span><span style="color: blue">="kw" </span><span style="color: red">name</span><span style="color: blue">="kw" </span><span style="color: red">class</span><span style="color: blue">="h_15" </span><span style="color: red">onKeyUp</span><span style="color: blue">="keyup(event)"   </span><span style="color: red">autocomplete</span><span style="color: blue">="off" />      
        <</span><span style="color: rgb(163,21,21)">div </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">DISPLAY</span>: <span style="color: blue">none" </span><span style="color: red">id</span><span style="color: blue">="keyup_d" </span><span style="color: red">class</span><span style="color: blue">="sokeyup" ></</span><span style="color: rgb(163,21,21)">div</span><span style="color: blue">>
         </</span><span style="color: rgb(163,21,21)">li</span><span style="color: blue">>
         <</span><span style="color: rgb(163,21,21)">li </span><span style="color: red">class</span><span style="color: blue">="h_16">
            <</span><span style="color: rgb(163,21,21)">input </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">CURSOR</span>: <span style="color: blue">pointer" </span><span style="color: red">onClick</span><span style="color: blue">="so_search();"  </span><span style="color: red">src</span><span style="color: blue">="searchbuttom.gif" </span><span style="color: red">type</span><span style="color: blue">="image"  />
        </</span><span style="color: rgb(163,21,21)">li</span><span style="color: blue">>
        </</span><span style="color: rgb(163,21,21)">ul</span><span style="color: blue">>
        </</span><span style="color: rgb(163,21,21)">div</span><span style="color: blue">>  

    </</span><span style="color: rgb(163,21,21)">form</span><span style="color: blue">>
</</span><span style="color: rgb(163,21,21)">body</span><span style="color: blue">>
</</span><span style="color: rgb(163,21,21)">html</span><span style="color: blue">>
</span></pre>

<font color="#ff8000">css:</font>
<pre class="code"><span style="color: rgb(163,21,21)">UL </span>{     <span style="color: red">padding</span>: <span style="color: blue">0px</span>;  <span style="color: red">LIST-STYLE-TYPE</span>: <span style="color: blue">none</span>;     <span style="color: red">MARGIN</span>: <span style="color: blue">0px</span>;     <span style="color: red">LIST-STYLE-IMAGE</span>: <span style="color: blue">none</span>;     <span style="color: red">height</span>: <span style="color: blue">52px</span>;      }
<span style="color: rgb(163,21,21)">LI </span>{    <span style="color: red">PADDING-BOTTOM</span>: <span style="color: blue">0px</span>; <span style="color: red">LIST-STYLE-TYPE</span>: <span style="color: blue">none</span>; <span style="color: red">MARGIN</span>: <span style="color: blue">0px</span>; <span style="color: red">PADDING-LEFT</span>: <span style="color: blue">0px</span>; <span style="color: red">PADDING-RIGHT</span>: <span style="color: blue">0px</span>; <span style="color: red">LIST-STYLE-IMAGE</span>: <span style="color: blue">none</span>; <span style="color: red">PADDING-TOP</span>: <span style="color: blue">0px</span>}
<span style="color: rgb(163,21,21)">.h_14 </span>{    <span style="color: red">BACKGROUND-IMAGE</span>: <span style="color: blue">url(text_search.jpg)</span>; <span style="color: red">TEXT-ALIGN</span>: <span style="color: blue">left</span>; <span style="color: red">PADDING-BOTTOM</span>: <span style="color: blue">1px</span>; <span style="color: red">LINE-HEIGHT</span>: <span style="color: blue">26px</span>; <span style="color: red">MARGIN-TOP</span>: <span style="color: blue">3px</span>; <span style="color: red">PADDING-LEFT</span>: <span style="color: blue">4px</span>; <span style="color: red">WIDTH</span>: <span style="color: blue">245px</span>; <span style="color: red">BACKGROUND-REPEAT</span>: <span style="color: blue">no-repeat</span>; <span style="color: red">BACKGROUND-POSITION</span>: <span style="color: blue">center 50%</span>; <span style="color: red">FLOAT</span>: <span style="color: blue">left</span>; <span style="color: red">HEIGHT</span>: <span style="color: blue">26px</span>; <span style="color: red">MARGIN-LEFT</span>: <span style="color: blue">3px</span>; <span style="color: red">VERTICAL-ALIGN</span>: <span style="color: blue">middle</span>; <span style="color: red">OVERFLOW</span>: <span style="color: blue">hidden</span>; <span style="color: red">MARGIN-RIGHT</span>: <span style="color: blue">3px</span>; <span style="color: red">PADDING-TOP</span>: <span style="color: blue">2px</span>}
<span style="color: rgb(163,21,21)">.h_15 </span>{    <span style="color: red">BORDER-BOTTOM</span>: <span style="color: blue">0px</span>; <span style="color: red">BORDER-LEFT</span>: <span style="color: blue">0px</span>; <span style="color: red">PADDING-BOTTOM</span>: <span style="color: blue">0px</span>; <span style="color: red">LINE-HEIGHT</span>: <span style="color: blue">20px</span>; <span style="color: red">PADDING-LEFT</span>: <span style="color: blue">0px</span>; <span style="color: red">WIDTH</span>: <span style="color: blue">240px</span>; <span style="color: red">PADDING-RIGHT</span>: <span style="color: blue">0px</span>; <span style="color: red">DISPLAY</span>: <span style="color: blue">block</span>; <span style="color: red">FLOAT</span>: <span style="color: blue">left</span>; <span style="color: red">HEIGHT</span>: <span style="color: blue">20px</span>; <span style="color: red">MARGIN-LEFT</span>: <span style="color: blue">0px</span>; <span style="color: red">FONT-SIZE</span>: <span style="color: blue">14px</span>; <span style="color: red">VERTICAL-ALIGN</span>: <span style="color: blue">middle</span>; <span style="color: red">BORDER-TOP</span>: <span style="color: blue">0px</span>; <span style="color: red">BORDER-RIGHT</span>: <span style="color: blue">0px</span>; <span style="color: red">PADDING-TOP</span>: <span style="color: blue">4px</span>}
<span style="color: rgb(163,21,21)">.h_16 </span>{    <span style="color: red">WIDTH</span>: <span style="color: blue">57px</span>; <span style="color: red">FLOAT</span>: <span style="color: blue">left</span>; <span style="color: red">HEIGHT</span>: <span style="color: blue">32px</span>; <span style="color: red">OVERFLOW</span>: <span style="color: blue">hidden</span>; <span style="color: red">CURSOR</span>: <span style="color: blue">pointer</span>}
<span style="color: rgb(163,21,21)">.sokeyup </span>{    <span style="color: red">Z-INDEX</span>: <span style="color: blue">10000</span>; <span style="color: red">BORDER-BOTTOM</span>: <span style="color: blue">#000000 1px solid</span>; <span style="color: red">POSITION</span>: <span style="color: blue">absolute</span>; <span style="color: red">BORDER-LEFT</span>: <span style="color: blue">#000000 1px solid</span>; <span style="color: red">WIDTH</span>: <span style="color: blue">245px</span>; <span style="color: red">DISPLAY</span>: <span style="color: blue">none</span>; <span style="color: red">CLEAR</span>: <span style="color: blue">both</span>; <span style="color: red">OVERFLOW</span>: <span style="color: blue">hidden</span>; <span style="color: red">BORDER-TOP</span>: <span style="color: blue">#000000 1px solid</span>; <span style="color: red">BORDER-RIGHT</span>: <span style="color: blue">#000000 1px solid</span>}
<span style="color: rgb(163,21,21)">.sokeyup_1 </span>{    <span style="color: red">LINE-HEIGHT</span>: <span style="color: blue">20px</span>; <span style="color: red">PADDING-LEFT</span>: <span style="color: blue">4px</span>; <span style="color: red">WIDTH</span>: <span style="color: blue">237px</span>; <span style="color: red">PADDING-RIGHT</span>: <span style="color: blue">4px</span>; <span style="color: red">HEIGHT</span>: <span style="color: blue">20px</span>; <span style="color: red">CLEAR</span>: <span style="color: blue">both</span>; <span style="color: red">OVERFLOW</span>: <span style="color: blue">hidden</span>}
<span style="color: rgb(163,21,21)">.sokeyup_2 </span>{    <span style="color: red">LINE-HEIGHT</span>: <span style="color: blue">20px</span>; <span style="color: red">WIDTH</span>: <span style="color: blue">140px</span>; <span style="color: red">FLOAT</span>: <span style="color: blue">left</span>; <span style="color: red">HEIGHT</span>: <span style="color: blue">20px</span>; <span style="color: red">COLOR</span>: <span style="color: blue">#4c4c4c</span>}
<span style="color: rgb(163,21,21)">.sokeyup_3 </span>{    <span style="color: red">TEXT-ALIGN</span>: <span style="color: blue">right</span>; <span style="color: red">LINE-HEIGHT</span>: <span style="color: blue">20px</span>; <span style="color: red">WIDTH</span>: <span style="color: blue">97px</span>; <span style="color: red">FLOAT</span>: <span style="color: blue">right</span>; <span style="color: red">HEIGHT</span>: <span style="color: blue">20px</span>; <span style="color: red">COLOR</span>: <span style="color: blue">#008000</span>}
<span style="color: rgb(163,21,21)">.sokeyup_4 </span>{    <span style="color: red">LINE-HEIGHT</span>: <span style="color: blue">20px</span>; <span style="color: red">WIDTH</span>: <span style="color: blue">237px</span>; <span style="color: red">HEIGHT</span>: <span style="color: blue">20px
</span>}
<span style="color: rgb(163,21,21)">.sokeyup_5 </span>{    <span style="color: red">LINE-HEIGHT</span>: <span style="color: blue">20px</span>; <span style="color: red">FLOAT</span>: <span style="color: blue">right</span>; <span style="color: red">HEIGHT</span>: <span style="color: blue">20px</span>; <span style="color: red">COLOR</span>: <span style="color: blue">#0000cc</span>; <span style="color: red">CURSOR</span>: <span style="color: blue">pointer</span>; <span style="color: red">TEXT-DECORATION</span>: <span style="color: blue">underline</span>}</pre>


<font color="#ff8000">js:</font>


<pre class="code"><span style="color: blue">function </span>so_search(){
    <span style="color: blue">var </span>kw = $(<span style="color: rgb(163,21,21)">"#kw"</span>).val();
    <span style="color: blue">var </span>kid = 0;
    <span style="color: blue">var </span>kname=$(<span style="color: rgb(163,21,21)">"#select_kid"</span>).html();
    kw = encodeURI(kw);    
    <span style="color: blue">if</span>(kw == <span style="color: rgb(163,21,21)">''</span>){
        alert(<span style="color: rgb(163,21,21)">"请输入要查找的关键词"</span>);
    }<span style="color: blue">else</span>{                  
        location.href=<span style="color: rgb(163,21,21)">"search-"</span>+kw+<span style="color: rgb(163,21,21)">".html"</span>;
    
    }    
}
  
<span style="color: green">//关闭搜索提示
</span><span style="color: blue">function </span>keyup_close(){
    $(<span style="color: rgb(163,21,21)">"#keyup_d"</span>).hide();    
}
<span style="color: green">//
</span><span style="color: blue">function </span>keyup_over(id){
    $(<span style="color: rgb(163,21,21)">"#u_"</span>+id).css(<span style="color: rgb(163,21,21)">"background-color"</span>,<span style="color: rgb(163,21,21)">"#0000CC"</span>);
    $(<span style="color: rgb(163,21,21)">"#l_"</span>+id).css(<span style="color: rgb(163,21,21)">"color"</span>,<span style="color: rgb(163,21,21)">"#fff"</span>);
}
<span style="color: blue">function </span>keyup_out(id){
    $(<span style="color: rgb(163,21,21)">"#u_"</span>+id).css(<span style="color: rgb(163,21,21)">"background-color"</span>,<span style="color: rgb(163,21,21)">"#fff"</span>);
    $(<span style="color: rgb(163,21,21)">"#l_"</span>+id).css(<span style="color: rgb(163,21,21)">"color"</span>,<span style="color: rgb(163,21,21)">"#000"</span>);
}
<span style="color: blue">function </span>keyup_click(id){
    $(<span style="color: rgb(163,21,21)">"#keyup_d"</span>).hide();
    <span style="color: blue">var </span>kw=$(<span style="color: rgb(163,21,21)">"#l_"</span>+id).html();
     kw = encodeURI(kw);            
    location.href=<span style="color: rgb(163,21,21)">"search-"</span>+kw+<span style="color: rgb(163,21,21)">".html"</span>;
}


<span style="color: blue">function </span>keyup(event){
    <span style="color: blue">if</span>(window.event){
    <span style="color: blue">var </span>key =window.event.keyCode;
    }<span style="color: blue">else</span>{    
     <span style="color: blue">var </span>key =event.which;
    }

    <span style="color: blue">if</span>(key!=38&&key!=40&&key!=13){
      
      <span style="color: blue">var </span>kw=$(<span style="color: rgb(163,21,21)">"#kw"</span>).val();
        
        <span style="color: green">//跨域获取搜索提示
        
      </span><span style="color: blue">var </span>url =<span style="color: rgb(163,21,21)">"JsonHandler.ashx?kw=" </span>+ encodeURI(kw) + <span style="color: rgb(163,21,21)">"&time=" </span>+ <span style="color: blue">new </span>Date().toString();<span style="color: green">//中文
        </span>$.<span style="color: blue">get</span>(url,<span style="color: blue">function</span>(data){
            <span style="color: blue">if </span>(data!=<span style="color: rgb(163,21,21)">''</span>) {
                $(<span style="color: rgb(163,21,21)">"#keyup_d"</span>).html(data+<span style="color: rgb(163,21,21)">'<ul class="sokeyup_4"><li id="l_0" style="display:none;"></li><li class="sokeyup_5" onclick="keyup_close()">关闭</li></ul>'</span>);
                $(<span style="color: rgb(163,21,21)">"#keyup_d"</span>).show();
            } <span style="color: blue">else </span>{
                $(<span style="color: rgb(163,21,21)">"#keyup_d"</span>).hide();
            }
        }
    );
    }
}
   

<span style="color: blue">var </span>ul_id=0;
$(window).keydown(<span style="color: blue">function</span>(event){
    <span style="color: blue">if</span>(window.event){
        <span style="color: blue">var </span>key =window.event.keyCode;
    }<span style="color: blue">else</span>{
         <span style="color: blue">var </span>key =event.which;
    }
    
    <span style="color: blue">if </span>(key==13) {

        <span style="color: blue">if </span>(searchFocus == <span style="color: blue">true</span>) {
            
        }
    }
    
    
    <span style="color: blue">var </span>ulcount=$(<span style="color: rgb(163,21,21)">"#keyup_d ul"</span>).size()-1;
    <span style="color: blue">if</span>($(<span style="color: rgb(163,21,21)">"#keyup_d"</span>).css(<span style="color: rgb(163,21,21)">"display"</span>)==<span style="color: rgb(163,21,21)">"block"</span>){
        <span style="color: green">//向上
        </span>$(<span style="color: rgb(163,21,21)">"#l_0"</span>).html($(<span style="color: rgb(163,21,21)">"#kw"</span>).val());
        <span style="color: blue">if</span>(key==13) {
            <span style="color: blue">if </span>($(<span style="color: rgb(163,21,21)">"#kw"</span>).val()!= <span style="color: rgb(163,21,21)">""</span>) {
                so_search();
            }
        }
        <span style="color: blue">if </span>(key==38) {
            
            ul_id--;
            <span style="color: blue">if</span>(ul_id<0){
                ul_id = ulcount;
                keyup_over(ul_id);
                
                
            }<span style="color: blue">else</span>{
            
                keyup_out(ul_id+1);
                keyup_over(ul_id);
                
            
            }
            $(<span style="color: rgb(163,21,21)">"#kw"</span>).val($(<span style="color: rgb(163,21,21)">"#l_"</span>+ul_id).html());
            <span style="color: blue">return false</span>;
            
        }
        <span style="color: green">//向下
        </span><span style="color: blue">if </span>(key==40 ) {
            $(<span style="color: rgb(163,21,21)">"#l_0"</span>).html($(<span style="color: rgb(163,21,21)">"#kw"</span>).val());
            ul_id++;
            <span style="color: blue">if</span>(ul_id>ulcount){
                ul_id=0;
                keyup_out(ulcount);
            }<span style="color: blue">else</span>{
            
                keyup_out(ul_id-1);
                keyup_over(ul_id);
                
                
            }
            $(<span style="color: rgb(163,21,21)">"#kw"</span>).val($(<span style="color: rgb(163,21,21)">"#l_"</span>+ul_id).html());
            <span style="color: blue">return false</span>;
        }
    }
});</pre>

<font color="#ff8000">ashx:</font>
<pre class="code"><span style="background: rgb(255,238,98)"><%<span style="color: blue">@ </span><span style="color: rgb(163,21,21)">WebHandler </span><span style="color: red">Language</span><span style="color: blue">="C#" </span><span style="color: red">Class</span><span style="color: blue">="JsonHandler" </span><span style="background: rgb(255,238,98)">%>

</span><span style="color: blue">using </span>System;
<span style="color: blue">using </span>System.Web;

<span style="color: blue">using </span>System.Data.SqlClient;
<span style="color: blue">using </span>System.Data;


<span style="color: blue">public class </span><span style="color: rgb(43,145,175)">JsonHandler </span>: <span style="color: rgb(43,145,175)">IHttpHandler </span>{

    <span style="color: blue">public void </span>ProcessRequest(<span style="color: rgb(43,145,175)">HttpContext </span>context)
    {
        context.Response.ContentType = <span style="color: rgb(163,21,21)">"text/plain"</span>;
        <span style="color: blue">string </span>Key = context.Request[<span style="color: rgb(163,21,21)">"kw"</span>];
  
        <span style="color: blue">if </span>(Key !=<span style="color: blue">null</span>&&Key!=<span style="color: rgb(163,21,21)">""</span>)
        {
            <span style="color: rgb(43,145,175)">SqlConnection </span>con = <span style="color: blue">new </span><span style="color: rgb(43,145,175)">SqlConnection</span>(<span style="color: rgb(163,21,21)">"server=JUQI;database=NorthWind;uid=sa;pwd=sa;"</span>);
            con.Open();
            <span style="color: blue">string </span>str = <span style="color: rgb(163,21,21)">"select distinct keyword,num from search where keyword like @kw order by keyword"</span>;
            <span style="color: rgb(43,145,175)">SqlCommand </span>com = <span style="color: blue">new </span><span style="color: rgb(43,145,175)">SqlCommand</span>(str, con);
            com.Parameters.Add(<span style="color: rgb(163,21,21)">"@kw"</span>, <span style="color: rgb(43,145,175)">SqlDbType</span>.NVarChar).Value = <span style="color: rgb(163,21,21)">"%"</span>+ Key + <span style="color: rgb(163,21,21)">"%"</span>;
            <span style="color: rgb(43,145,175)">SqlDataReader </span>sdr = com.ExecuteReader();

            <span style="color: blue">string </span>htmlstr = <span style="color: rgb(163,21,21)">""</span>;
            <span style="color: blue">int </span>i = 1;
            <span style="color: blue">while </span>(sdr.Read())
            {
                <span style="color: blue">string </span>kword = sdr[<span style="color: rgb(163,21,21)">"keyword"</span>].ToString();
                <span style="color: blue">string </span>a = sdr[<span style="color: rgb(163,21,21)">"num"</span>].ToString();
              
                htmlstr += <span style="color: rgb(163,21,21)">"<ul class='sokeyup_1' onmouseover='keyup_over(" </span>+ i + <span style="color: rgb(163,21,21)">")' onmouseout='keyup_out(" </span>+ i + <span style="color: rgb(163,21,21)">")' onclick='keyup_click(" </span>+ i + <span style="color: rgb(163,21,21)">")' id='u_" </span>+ i + <span style="color: rgb(163,21,21)">"'>"</span>;
                htmlstr += <span style="color: rgb(163,21,21)">"<li class='sokeyup_2' id='l_" </span>+ i + <span style="color: rgb(163,21,21)">"'>" </span>+ kword + <span style="color: rgb(163,21,21)">"</li>"</span>;
                htmlstr += <span style="color: rgb(163,21,21)">"<li class='sokeyup_3'>" </span>+ a + <span style="color: rgb(163,21,21)">" 结果</li></ul>"</span>;
                i++;
            }
            context.Response.Write(htmlstr);
            context.Response.End();
            sdr.Close();
            con.Close();

        }
    }
 
    <span style="color: blue">public bool </span>IsReusable {
        <span style="color: blue">get </span>{
            <span style="color: blue">return false</span>;
        }
    }

}</pre>
</div>
试试其它关键字
同语言下
可能有用的
曾祥展贡献的其它代码(13)