c# webform 仿百度自动补全(搭配mysql数据库)

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 onmouseover="javascript:suggestOver(this);"‘;
s+=‘ onmouseout= "javascript:suggestOut(this);" ‘;
s+=‘ onclick= "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" onkeyup="searchSuggest();" size="20" class="input_out" onfocus="this.className=‘input_on‘;this.onmouseout=‘‘" onblur="this.className=‘input_off‘;this.onmouseout=function(){this.className=‘input_out‘};" onmousemove="this.className=‘input_move‘" onmouseout="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);
}
}
}
}

时间: 2024-08-05 16:20:15

c# webform 仿百度自动补全(搭配mysql数据库)的相关文章

仿百度自动补全搜索框效果(*附有源码下载)

页面效果及代码,(源码在下面的下载链接) <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/semantic.css"> <script type="text/javascript" src="jquery-autocomplete/jquery

仿百度自动补全jquery

新建index.html文件,直接复制下面代码到新建的文件index.html里面,用浏览器访问,仅用于参考: <!doctype html><html><meta charset="utf-8"><style>body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;}.auto_hidden { width:204px;border-

solr进阶七:与jQuery结合的自动补全功能

网上有大量的jQuery自动补全功能的插件,我实现这个功能是采用网友写好的纯jQuery代码,而不是采用插件,因为特效会差很多.而后台的数据是从solr那边获取过来,通过整理,放到对象中,再放到集合中,然后在servlet层解开,生成xml文件,返回到前台,形成自动提示补全的功能,流程非常简单,没有采用框架技术,只是用了JSP的servlet来做中间层而已. 目录结构如下: 1.先编写实体类src\com\lifeix\entity\Word.java package com.lifeix.en

mysql 命令行 自动补全

配置文件中 默认关闭自动补全: [mysql] #no-auto-rehash # faster start of mysql but no tab completition 改为: [mysql] auto-rehash  #now tab completition

js 实现类似百度联想输入,自动补全功能

js  实现类似百度联想输入,自动补全功能 方案一: search是搜索框id="search" 1 //点击页面隐藏自动补全提示框 2 document.onclick = function (e) { 3 var e = e ? e : window.event; 4 var tar = e.srcElement || e.target; 5 if (tar.id != search) { 6 if ($("#" + auto).is(":visibl

上课笔记_使用DWR实现自动补全 类似百度搜索框的自动显示效果

使用DWR实现自动补全 自动补全:是指用户在文本框中输入前几个字母或汉字的时候,自动在存放数据的文件或数据库中将所有以这些字母或汉字开头的数据提示给用户供用户选择 在日常上网过程中,我们经常使用搜索引擎,当我们输入想要检索的关键字时,搜索引擎会提示我们相关的关键字 训练要点: 掌握使用DWR框架开发Ajax程序 使用MyEclipse 10.0 + MySql5.0 新建数据库:可以手动随便新建一个测试用的 DROP TABLE IF EXISTS `books`; CREATE TABLE `

Autocomplete 自动补全(Webform实战篇)

因为项目中需要用到一个自动补全的功能,功能描述: 需求一:新增收件人的时候,自动下拉显示出数据库中所有的收件人信息(显示的信息包括:姓名-收件地址-联系方式) 需求二:选中一个值得时候,分别赋值到对应文本框(收件人输入框中赋值 姓名,联系方式输入框中赋值 手机号,收件地址输入框中赋值 地址) 解决需求一(因本人比较懒,所以直接选用了一个比较方便的插件:Autocomplete [参考学习地址:http://www.runoob.com/jqueryui/jqueryui-use.html]) 步

仿知乎登陆邮箱自动补全

项目要求: 登陆界面输入邮箱,自动匹配常用邮箱并自动补全后缀. 比如邮箱为[email protected],当我输入[email protected]时,输入框自动补全后面的q.com且颜色为灰浅色,输入框失去焦点时,补全q.com颜色变为黑色,和前面[email protected]的颜色一致. 解决: 1.通过查看知乎的布局,发现没有用自定义控件,仅仅用了普通的EditText. 2.查看EditTex(继承TextView)t的API,最终想到了用下面这个方法 void android.

bigautocomplete实现联想输入,自动补全

bigautocomplete是一款Jquery插件.用它实现仿搜索引擎文本框自动补全插件功能很实用,使用也很简单,引入了插件之后写几行代码就可以实现,可以灵活设置. 先看效果图: 上图是通过ajax请求服务器返回的数据.下面简单介绍如何使用. 一.如何使用: 引入jquery.bigautocomplete.js和jquery.bigautocomplete.css文件到你的页面中. 二.参数说明: $("xxxxx").bigAutocomplete({data:[...],url