博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
c# webform 仿百度自动补全(搭配mysql数据库)
阅读量:4512 次
发布时间:2019-06-08

本文共 4636 字,大约阅读时间需要 15 分钟。

1,search.aspx(显示页面)

<!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>
<title>输入框信息提示(数据库)</title>
<script language="javascript" type="text/javascript">
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
var obj;
if(window.XMLHttpRequest) { //Mozilla 浏览器
obj = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
obj = new ActiveXObject( "Msxml2.XMLHTTP");
} catch(e){
try{
obj = new ActiveXObject( "Microsoft.XMLHTTP");
} catch (e) {}
}
}
return obj;
}
//当输入框的内容变化时,调用该函数
function searchSuggest() {
var inputField = document.getElementById( "txtSearch");
var suggestText = document.getElementById( "search_suggest");

if (inputField.value.length > 0) {

var o=createXMLHttpRequest();

var url = "Server.aspx?searchText=" + escape(inputField.value);

o.open("GET", url, true);
o.onreadystatechange = function(){
if(o.readyState == 4){
if(o.status == 200){
var sourceText = o.responseText.split( "\n");
if(sourceText.length >1){
suggestText.style.display= "";
suggestText.innerHTML = "";
for(var i=0;i <sourceText.length-1;i++) {
var s=' <div οnmοuseοver="javascript:suggestOver(this);"';
s+=' οnmοuseοut= "javascript:suggestOut(this);" ';
s+=' οnclick= "javascript:setSearch(this.innerHTML);" ';
s+=' class= "suggest_link">' +sourceText[i]+'</div>';
suggestText.innerHTML += s;
}
}
else{
suggestText.style.display= "none";
}
}
}
};//指定响应函数
o.send(null); // 发送请求
}
else {
suggestText.style.display= "none";
}
}

function suggestOver(div_value){

div_value.className = "suggest_link_over";
}

function suggestOut(div_value){

div_value.className = "suggest_link";
}

function setSearch(obj){

document.getElementById("txtSearch").value = obj;
var div = document.getElementById( "search_suggest");
div.innerHTML = "";
div.style.display= "none";
}

function tbblur(){

var div = document.getElementById("search_suggest");
//div.innerHTML = "";
div.style.display= "none";
}
</script>

<style type="text/css" media="screen">

body
{
font: 11px arial;
}
.suggest_link
{
background-color: #FFFFFF;
padding: 2px 6px 2px 6px;
}
.suggest_link_over
{
background-color: #E8F2FE;
padding: 2px 6px 2px 6px;
}
#search_suggest
{
position: absolute;
background-color: #FFFFFF;
text-align: left;
border: 1px solid #000000;
}
/*input*/
.input_on{
padding:2px 8px 0pt 3px;
height:18px;
border:1px solid #999;
background-color:#FFFFCC;
}
.input_off{
padding:2px 8px 0pt 3px;
height:18px;
border:1px solid #CCC;
background-color:#FFF;
}
.input_move{
padding:2px 8px 0pt 3px;
height:18px;
border:1px solid #999;
background-color:#FFFFCC;
}
.input_out{
/*height:16px;默认高度*/
padding:2px 8px 0pt 3px;
height:18px;
border:1px solid #CCC;
background-color:#FFF;
}
</style>
</head>
<body>
<form id="form1" action="">
<input type="text" id="txtSearch" name="txtSearch" οnkeyup="searchSuggest();" size="20" class="input_out" οnfοcus="this.className='input_on';this.οnmοuseοut=''" οnblur="this.className='input_off';this.οnmοuseοut=function(){this.className='input_out'};" οnmοusemοve="this.className='input_move'" οnmοuseοut="this.className='input_out'" /><br />
<div id="search_suggest" ></div>
</form>
</body>
</html>

2.1,Server.aspx(数据提供页,此页面中删除其它多余代码,只留最上面一行。如果这里改了名请记得显示页面的调用处也要改哈-_-)

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

2.2,Server.aspx.cs(数据提供页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 MySql.Data.MySqlClient;

public partial class Server : System.Web.UI.Page

{
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString[ "searchText"] != null)
{
if (Request.QueryString[ "searchText"].ToString().Trim().Length > 0)
{
DataTable dt = new DataTable(); 
using (MySqlConnection conn = new MySqlConnection("Server=10.174.14.160;Initial Catalog=parts;User Id=root;pwd=789789;Allow Zero Datetime=True"))
{
MySqlCommand cmd = new MySqlCommand();
cmd.Connection = conn;
cmd.CommandText = string.Format(
 "Select distinct GNFL From summary Where GNFL like '%{0}%'",
Request.QueryString["searchText"]);
MySqlDataAdapter adapter = new MySqlDataAdapter(cmd);
conn.Open();
adapter.Fill(dt);
}

string returnText = "";

if (dt != null && dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
returnText += dt.Rows[i][0].ToString() + "\n";
}
}

Response.Write(returnText);

}
}
}
}

转载于:https://www.cnblogs.com/praiselee/p/4904465.html

你可能感兴趣的文章
POJ 3134 Power Calculus ★(记录状态的BFS)
查看>>
POJ 3678 Katu Puzzle(POJ 六道2-SAT之一)
查看>>
面向对象初识
查看>>
LeetCode: Find All Duplicates in an Array
查看>>
免费计算机编程类中文书籍
查看>>
mysql之TIMESTAMP(时间戳)用法详解
查看>>
JS笔记——Function类型(JS笔记系列)
查看>>
抽象类入门常见错误
查看>>
javascript修改html <b>标签里面的内容
查看>>
open live writer安装以及代码高亮、折叠插件安装
查看>>
消息队列
查看>>
POJ 1321 棋盘问题 dfs回溯
查看>>
org.apache.catalina.LifecycleException异常的处理
查看>>
C++转向C#的疑惑:难道C#中没有拷贝构造函数 ?[转]
查看>>
计算一个整数二进制中1的个数
查看>>
netdom join 错误:指定的域不存在,或无法联系。
查看>>
Android中Dialog的使用
查看>>
12/10/2015 校内测试:数列
查看>>
Android Activity接收Service发送的广播
查看>>
[Leetcode] Spiral Matrix | 把一个2D matrix用螺旋方式打印
查看>>