html百度搜索提示功能,jQuery+Ajax实现类似百度的搜索自动提示功能

jQuery+Ajax实现类似百度的搜索自动提示功能，具体看下面的代码：

页面：

seach

css

UL {

padding: 0px; LIST-STYLE-TYPE: none;

MARGIN: 0px;

LIST-STYLE-IMAGE: none;

height: 52px;

}

LI {

PADDING-BOTTOM: 0px;

LIST-STYLE-TYPE: none;

MARGIN: 0px;

PADDING-LEFT: 0px;

PADDING-RIGHT: 0px;

LIST-STYLE-IMAGE: none;

PADDING-TOP: 0px

}

.h_14 {

BACKGROUND-IMAGE: url(text_search.jpg);

TEXT-ALIGN: left;

PADDING-BOTTOM: 1px;

LINE-HEIGHT: 26px;

MARGIN-TOP: 3px;

PADDING-LEFT: 4px;

WIDTH: 245px;

BACKGROUND-REPEAT: no-repeat;

BACKGROUND-POSITION: center 50%;

FLOAT: left;

HEIGHT: 26px;

MARGIN-LEFT: 3px;

VERTICAL-ALIGN: middle;

OVERFLOW: hidden;

MARGIN-RIGHT: 3px;

PADDING-TOP: 2px

}

.h_15 {

BORDER-BOTTOM: 0px;

BORDER-LEFT: 0px;

PADDING-BOTTOM: 0px;

LINE-HEIGHT: 20px;

PADDING-LEFT: 0px;

WIDTH: 240px;

PADDING-RIGHT: 0px;

DISPLAY: block;

FLOAT: left;

HEIGHT: 20px;

MARGIN-LEFT: 0px;

FONT-SIZE: 14px;

VERTICAL-ALIGN: middle;

BORDER-TOP: 0px;

BORDER-RIGHT: 0px;

PADDING-TOP: 4px

}

.h_16 {

WIDTH: 57px;

FLOAT: left;

HEIGHT: 32px;

OVERFLOW: hidden;

CURSOR: pointer

}

.sokeyup {

Z-INDEX: 10000;

BORDER-BOTTOM: #000000 1px solid;

POSITION: absolute;

BORDER-LEFT: #000000 1px solid;

WIDTH: 245px;

DISPLAY: none;

CLEAR: both;

OVERFLOW: hidden;

BORDER-TOP: #000000 1px solid;

BORDER-RIGHT: #000000 1px solid

}

.sokeyup_1 {

LINE-HEIGHT: 20px;

PADDING-LEFT: 4px;

WIDTH: 237px;

PADDING-RIGHT: 4px;

HEIGHT: 20px;

CLEAR: both;

OVERFLOW: hidden

}

.sokeyup_2 {

LINE-HEIGHT: 20px;

WIDTH: 140px;

FLOAT: left;

HEIGHT: 20px;

COLOR: #4c4c4c

}

.sokeyup_3 {

TEXT-ALIGN: right;

LINE-HEIGHT: 20px;

WIDTH: 97px;

FLOAT: right;

HEIGHT: 20px;

COLOR: #008000

}

.sokeyup_4 {

LINE-HEIGHT: 20px;

WIDTH: 237px;

HEIGHT: 20px

}

.sokeyup_5 {

LINE-HEIGHT: 20px;

FLOAT: right;

HEIGHT: 20px;

COLOR: #0000cc;

CURSOR: pointer;

TEXT-DECORATION: underline

}

JS:

function so_search(){

var kw = $("#kw").val();

var kid = 0;

var kname=$("#select_kid").html();

kw = encodeURI(kw);

if(kw == ''){

alert("请输入要查找的关键词");

}else{

location.href="search-"+kw+".html";

}

}

//关闭搜索提示

function keyup_close(){

$("#keyup_d").hide();

}

//

function keyup_over(id){

$("#u_"+id).css("background-color","#0000CC");

$("#l_"+id).css("color","#fff");

}

function keyup_out(id){

$("#u_"+id).css("background-color","#fff");

$("#l_"+id).css("color","#000");

}

function keyup_click(id){

$("#keyup_d").hide();

var kw=$("#l_"+id).html();

kw = encodeURI(kw);

location.href="search-"+kw+".html";

}

function keyup(event){

if(window.event){

var key =window.event.keyCode;

}else{

var key =event.which;

}

if(key!=38&&key!=40&&key!=13){

var kw=$("#kw").val();

//跨域获取搜索提示

var url ="JsonHandler.ashx?kw=" + encodeURI(kw) + "&time=" + new Date().toString();//中文

$.get(url,function(data){

if (data!='') {

$("#keyup_d").html(data+'

• 关闭

');

$("#keyup_d").show();

} else {

$("#keyup_d").hide();

}

}

);

}

}

var ul_id=0;

$(window).keydown(function(event){

if(window.event){

var key =window.event.keyCode;

}else{

var key =event.which;

}

if (key==13) {

if (searchFocus == true) {

}

}

var ulcount=$("#keyup_d ul").size()-1;

if($("#keyup_d").css("display")=="block"){

//向上

$("#l_0").html($("#kw").val());

if(key==13) {

if ($("#kw").val()!= "") {

so_search();

}

}

if (key==38) {

ul_id--;

if(ul_id<0){

ul_id = ulcount;

keyup_over(ul_id);

}else{

keyup_out(ul_id+1);

keyup_over(ul_id);

}

$("#kw").val($("#l_"+ul_id).html());

return false;

}

//向下

if (key==40 ) {

$("#l_0").html($("#kw").val());

ul_id++;

if(ul_id>ulcount){

ul_id=0;

keyup_out(ulcount);

}else{

keyup_out(ul_id-1);

keyup_over(ul_id);

}

$("#kw").val($("#l_"+ul_id).html());

return false;

}

}

});

ashx:

using System;

using System.Web;

using System.Data.SqlClient;

using System.Data;

public class JsonHandler : IHttpHandler {

public void ProcessRequest(HttpContext context)

{

context.Response.ContentType = "text/plain";

string Key = context.Request["kw"];

if (Key !=null&&Key!="")

{

SqlConnection con = new SqlConnection("server=JUQI;database=NorthWind;uid=sa;pwd=sa;");

con.Open();

string str = "select distinct keyword,num from search where keyword like @kw order by keyword";

SqlCommand com = new SqlCommand(str, con);

com.Parameters.Add("@kw", SqlDbType.NVarChar).Value = "%"+ Key + "%";

SqlDataReader sdr = com.ExecuteReader();

string htmlstr = "";

int i = 1;

while (sdr.Read())

{

string kword = sdr["keyword"].ToString();

string a = sdr["num"].ToString();

htmlstr += "

οnmοuseοut='keyup_out(" + i + ")' οnclick='keyup_click(" + i + ")' id='u_" + i + "'>";

htmlstr += "

" + kword + "";

htmlstr += "

" + a + " 结果";

i++;

}

context.Response.Write(htmlstr);

context.Response.End();

sdr.Close();

con.Close();

}

}

public bool IsReusable {

get {

return false;

}

}

}

更多信息请查看IT技术专栏