jquery+webservice方式的百度搜索下拉提示

最新推荐文章于 2018-06-27 10:27:00 发布

银狐被占用

最新推荐文章于 2018-06-27 10:27:00 发布

阅读量1w

点赞数

分类专栏： ASP.NET Ajax 文章标签： webservice jquery 百度 list function dataset

本文链接：https://blog.csdn.net/baby97/article/details/7898731

版权

ASP.NET 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

Ajax

6 篇文章 0 订阅

订阅专栏

default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="default.aspx.cs" Inherits="default_" EnableViewState="false" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>百度搜索下拉</title>
<script type="text/javascript" src="js/Jquery.js"></script>
</head>
<style>
#h_list {
background:#EEE;
z-index:99;
position:absolute;
font-size:12px;
}
#h_list li{
list-style-type:none;
font-size: 12px;
margin:0 0 0 0;
padding-left:2px;
}

#h_list .oubg {
height: 20px;
margin-top:1px;
text-align: left;
line-height:20px;
cursor:pointer;

}
#h_list .ovbg {
height: 20px;
margin-top:1px;
text-align: left;
line-height:20px;
cursor:pointer;
background:#DDD;
}
</style>
<body>
<div id="h_list" style="left:313px; top:57px; "></div>
<form runat="server">
<asp:TextBox ID="TextBox1" runat="server" CssClass="ipt_1" Text="" MaxLength="50"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="" CssClass="btn_1" OnClick="Button1_Click"></asp:Button>
<script src="js/KeyDropDownList.js"></script>
</form>
</body>
</html>

QueryKey.cs

using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Data;

/// <summary>
/// QueryKey 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class QueryKey : System.Web.Services.WebService {

public QueryKey () {

        //如果使用设计的组件，请取消注释以下行
        //InitializeComponent();
    }
    [WebMethod]
    public string GetTitleByKeyWord(string keyword)
    {
        if (keyword == "")
        {
            return "";
        }
        string re = "";
        using (DataSet ds = SqlHelper.DBClass.getDataSet("Select Top 10 * From t_keyword Where keyword like '%" + keyword.Replace("'", "''") + "%' order by hits desc", "tb"))
        {
            for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
            {
                DataRow dr = ds.Tables[0].Rows[i];
                re += "<li οnclick=\"setval(this.innerHTML);\" οnmοuseοver=\"overBg(this)\" οnmοuseοut=\"outBg(this)\" class=\"oubg\">" + dr["keyword"].ToString() + "</li>";
            }
        }
        if (re == "") re = "暂无内容";
        return re;
    }
    [WebMethod]
    public void InsertKeyWord(string keyword)
    {
        using (DataSet ds = SqlHelper.DBClass.getDataSet("select * From t_keyword Where keyword='" + keyword.Replace("'", "''") + "'", "tb"))
        {
            if (ds.Tables[0].Rows.Count > 0)
            {
                DataRow dr = ds.Tables[0].Rows[0];
                SqlHelper.DBClass.ExecSQL("update t_keyword set hits=hits+1 where keyword='" + keyword.Replace("'", "''") + "'");
            }
            else
                SqlHelper.DBClass.ExecSQL("insert into t_keyword(keyword) values('" + keyword.Replace("'", "''") + "')");
        }
    }

}

js/KeyDropDownList.js

// JScript 文件
var CurrentObj;
function KeyDownList(){
$("#h_list").width($(".ipt_1").width()+3);
$("#h_list").css({"top":$(".ipt_1").offset().top+$(".ipt_1").height()+5,"left":$(".ipt_1").offset().left});
if($(".ipt_1").val().replace(/(\s*$)/g, "")!=""){
        $.ajax({
            type:"POST",
            url:"QueryKey.asmx/GetTitleByKeyWord",
            data:"keyword="+$(".ipt_1").val(),
            success:function(re){
    $("#h_list").html(re.text);
    $("#h_list").show();
            }
        });
}
else{
  $("#h_list").hide();
//  $("#zindexDiv").hide();
}
}
function setval(val){
$(".ipt_1").val(val);
$("#h_list").hide();
// $("#zindexDiv").hide();
}
function outBg(obj)
{
obj.className="oubg";
}
function overBg(obj)
{
    CurrentObj = obj;
obj.className="ovbg";
}
function MoveFocus(index){
    if(CurrentObj){
        $(CurrentObj).mouseout();
        var pre_index = $("#h_list").find("li").index(CurrentObj)+index;
        if(pre_index>=$("#h_list").find("li").size()){
            pre_index = 0;
        }
        else if(pre_index < 0){
            pre_index = $("#h_list").find("li").size()-1;
        }
        $("#h_list").find("li").eq(pre_index).mouseover();
    }
    else
        $("#h_list").find("li").eq(0).mouseover();
}
//下拉框
$(".ipt_1").bind("keyup",function(){
    if (event.keyCode == 40) {//down
        MoveFocus(1);
    }
    else if (event.keyCode == 38) {//up
        MoveFocus(-1);
    }
    else if (event.keyCode == 13) {//回车
if($("#h_list").css("display")=="none" || $("#h_list").html()=="暂无内容" || ($("#h_list li").size()==1 && $(".ipt_1").val()==$("#h_list li").html()))
            $(".btn_1").click();
        else if(CurrentObj)
            $(CurrentObj).click();
    }
    else
     KeyDownList();
});
$(".ipt_1").bind("focus",function(){
$('.tishi').hide();
if($(this).val()!="" && $(this).val()!="%")
  KeyDownList();
});
//搜索按钮
$(".btn_1").bind("click",function(){
    if($('.ipt_1').val()=="" || $('.ipt_1').val()=="%"){
        $('.ipt_1').val("");
        $(".tishi").show();
        return false;
    }
    else{
        $(".tishi").hide();
    }
    if($(".ipt_1").val().replace(/(\s*$)/g, "")!=""){
        $.ajax({
            type:"POST",
            url:"QueryKey.asmx/InsertKeyWord",
            data:"keyword="+$(".ipt_1").val(),
            async:false,
            success:function(result){
                return true;
            }
        });
    }
});

web.config

<?xml version="1.0"?>

<configuration>
<appSettings>
  <add key="dbtype" value="sqlserver"/>
  <add key="oledbstr" value=""/>
  <add key="sqlstr" value="user id=sa;password=sa;initial catalog=db;data source=."/>
</appSettings>
<connectionStrings/>

<system.web>
  <webServices>
   <protocols>
    <add name="HttpPost"/>
    <add name="HttpGet"/>
   </protocols>
  </webServices>

<customErrors mode="Off"></customErrors>
  <pages validateRequest="false" enableViewStateMac="false" enableEventValidation="false" viewStateEncryptionMode="Never">
  </pages>
  
  <compilation debug="true">
  </compilation>
  
  <authentication mode="Windows"/>
  <!--
            如果在执行请求的过程中出现未处理的错误，
            则通过 <customErrors> 节可以配置相应的处理步骤。具体说来，
            开发人员通过该节可以配置
            要显示的 html 错误页
            以代替错误堆栈跟踪。

银狐被占用

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery+webservice方式的百度搜索下拉提示

default.aspx百度搜索下拉#h_list {background:#EEE;z-index:99;position:absolute;font-size:12px;}#h_list li{list-style-type:none;font-size: 12px;margin:0 0 0 0;padding-l
复制链接

扫一扫