zoukankan
html css js c++ java
类似Google边输边搜
select.js
var
searchReq
=
createAjaxObj();
function
createAjaxObj()
{
var
httprequest
=
false
;
if
(window.XMLHttpRequest)
{
httprequest
=
new
XMLHttpRequest();
if
(httprequest.overrideMimeType)
httprequest.overrideMimeType(
'
text/xml
'
);
}
else
if
(window.ActiveXObject)
{
//
IE
try
{
httprequest
=
new
ActiveXObject(
"
Msxml2.XMLHTTP
"
);
}
catch
(e)
{
try
{
httprequest
=
new
ActiveXObject(
"
Microsoft.XMLHTTP
"
);
}
catch
(e)
{
}
}
}
return
httprequest
}
var
id_txt;
//
text_write
var
id_hdn;
var
id_div;
//
div_show
function
searchSuggest(sid,v_txt_id,v_hdn_id,v_div_id,v_args)
{
if
(document.getElementById(
''
+
v_txt_id
+
''
).value
==
document.getElementById(
''
+
v_hdn_id
+
''
).value)
{
return
;
}
document.getElementById(
''
+
v_hdn_id
+
''
).value
=
document.getElementById(
''
+
v_txt_id
+
''
).value;
id_txt
=
v_txt_id;
id_hdn
=
v_hdn_id;
id_div
=
v_div_id;
if
(document.getElementById(
''
+
id_txt
+
''
).value.length
>
0
)
{
var
str
=
escape(document.getElementById(
''
+
id_txt
+
''
).value);
url
=
"
../WebService/Sv_Search.aspx?sid=
"
+
sid
+
"
&t=
"
+
new
Date().getTime()
+
"
&args=
"
+
v_args
+
"
&search=
"
+
str;
searchReq.open(
"
get
"
,url);
searchReq.onreadystatechange
=
handleSearchSuggest;
searchReq.send(
null
);
}
else
{
document.getElementById(
''
+
id_div
+
''
).innerHTML
=
""
;
document.getElementById(
''
+
id_div
+
''
).style.display
=
"
none
"
;
}
}
function
handleSearchSuggest()
{
if
(searchReq.readyState
==
4
)
{
var
ss
=
document.getElementById(
''
+
id_div
+
''
);
ss.innerHTML
=
""
;
s0
=
searchReq.responseText.length;
if
(s0
>
0
)
{
xmldoc
=
searchReq.responseXML;
var
message_nodes
=
xmldoc.getElementsByTagName(
"
message
"
);
var
n_messages
=
message_nodes.length;
if
(n_messages
<=
0
)
{
document.getElementById(
''
+
id_div
+
''
).innerHTML
=
""
;
document.getElementById(
''
+
id_div
+
''
).style.display
=
"
none
"
;
}
else
{
document.getElementById(
''
+
id_div
+
''
).style.display
=
"
block
"
;
for
(i
=
0
;i
<
n_messages;i
++
)
{
var
suggest
=
'
<div onmouseover="javascript:suggestOver(this);"
'
;
suggest
+=
'
onmouseout="javascript:sugggestOut(this);"
'
;
suggest
+=
'
onclick="javascript:setSearch(this.innerHTML);"
'
;
suggest
+=
'
class="suggest_link">
'
+
message_nodes[i].getElementsByTagName(
"
text
"
)[
0
].firstChild.data
+
'
</div>
'
;
ss.innerHTML
+=
suggest;
}
}
}
else
{
document.getElementById(
''
+
id_div
+
''
).innerHTML
=
""
;
document.getElementById(
''
+
id_div
+
''
).style.display
=
"
none
"
;
}
}
else
{
//
alert('网络连接失败');
}
}
function
suggestOver(div_value)
{
div_value.className
=
'
suggest_link_over
'
;
}
function
sugggestOut(div_value)
{
div_value.className
=
'
suggest_link
'
;
}
function
setSearch(div_value)
{
document.getElementById(
''
+
id_hdn
+
''
).value
=
div_value;
document.getElementById(
''
+
id_txt
+
''
).value
=
div_value;
document.getElementById(
''
+
id_div
+
''
).innerHTML
=
""
;
document.getElementById(
''
+
id_div
+
''
).style.display
=
"
none
"
;
}
SearchText.ascx
<%
@ Control Language
=
"
C#
"
AutoEventWireup
=
"
true
"
CodeFile
=
"
SearchText.ascx.cs
"
Inherits
=
"
Controls_SearchText
"
%>
<
script
language
="javascript"
src
="../Scripts/search.js"
></
script
>
<
input
runat
="server"
id
="txtSearch"
name
="txtSearch"
type
="text"
autocomplete
="off"
/>
<
input
runat
="server"
id
="hdnSearch"
name
="hdnSearch"
type
="hidden"
/>
<
br
><
div
runat
="server"
id
="search_suggest"
style
="display:none;"
class
="search_suggest"
></
div
>
<
style
>
/**/
/*
----------类似Google边输边搜样式----------
*/
.suggest_link
{
}
{
background-color
:
#fff
;
padding
:
2px 6px 2px 6px
;
cursor
:
default
;
}
.suggest_link_over
{
}
{
background
:
#e8e2fe
;
padding
:
2px 6px 2px 6px
;
cursor
:
pointer
;
}
.search_suggest
{
}
{
z-index
:
999
;
position
:
absolute
;
color
:
gray
;
background-color
:
#ffffff
;
text-align
:
left
;
border
:
1px solid gray
;
}
/**/
/*
-------------------------------------------
*/
</
style
>
<!--
SearchText.ascx.cs
-->
<%
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
public
partial class Controls_SearchText : System.Web.UI.UserControl
{
#region
property
private
string
_Sid
=
""
;
private
string
_Args
=
""
;
public
bool ReadOnly
{
set
{
if
(value
==
true
)
{
this.txtSearch.Attributes.Add(
"
readonly
"
,
"
readonly
"
);
}
else
{
this.txtSearch.Attributes.Remove(
"
readonly
"
);
}
}
}
public
string
Width
{
set
{
this.txtSearch.Style[
"
width
"
]
=
value;
this.search_suggest.Style[
"
width
"
]
=
value;
}
}
public
string
CssClass
{
set
{
this.txtSearch.Attributes[
"
class
"
]
=
value;
}
}
///
<
summary
>
///
用于指向所要查询的数据源,必填
///
</
summary
>
public
string
Sid
{
set
{
this._Sid
=
value;
}
}
///
<
summary
>
///
传递查询参数,可填
///
</
summary
>
public
string
Args
{
set
{
this._Args
=
value;
}
}
#endregion
protected void Page_Load(
object
sender, EventArgs e)
{
this.txtSearch.Attributes[
"
onpropertychange
"
]
=
"
javascript:searchSuggest(
"
+
this._Sid
+
"
,this.id,'
"
+
this.hdnSearch.ClientID
+
"
','
"
+
this.search_suggest.ClientID
+
"
','
"
+
this._Args
+
"
');
"
;
}
}
%>
Sv_Search.aspx.cs
public partial class WebService_Sv_Search : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.Response.ContentType = "text/xml";
string strSearchTarget = this.Request.QueryString["sid"].Trim();
string strSearchTime = this.Request.QueryString["t"].Trim();
string strSearchArgs = this.Request.QueryString["args"].Trim();
string[] arrSearchArgs = null;
if (!strSearchArgs.Equals(string.Empty))
{
arrSearchArgs = strSearchArgs.Split('|');
}
string strSearchString = this.Request.QueryString["search"].Trim();
DataTable dt = null;
SvSearchDal objDal = new SvSearchDal();
dt = objDal.GetCompletionList(int.Parse(strSearchTarget), strSearchTime, arrSearchArgs, strSearchString);
StringBuilder xml = new StringBuilder();
xml.Append("
<?
xml version=\"1.0\" encoding=\"utf-8\"
?>
\n");
xml.Append("
<
root
>
\n");
for(int i=0; i
<
dt
.Rows.Count; i++)
{
xml.Append("<message id
=\""
+ Convert.ToString(i + 1) + "\"
>
\n");
xml.Append("
<
text
>
" + dt.Rows[i][0].ToString().Trim() + "
</
text
>
\n");
xml.Append("
</
message
>
\n");
}
xml.Append("
</
root
>
");
this.Response.Write(xml.ToString());
this.Response.Flush();
this.Response.Close();
}
}
查看全文
相关阅读:
Day-11 闭包和迭代器
Day-01 Python基础
Day-10 函数的进阶
Day-09 初识函数
Day-08 文件操作
Day-07 基础数据类型补充 set集合 深浅拷贝
Day-06 小数据池 再谈编码
Day-05 基础数据类型字典dict
Day-04 基础数据类型list, tuple
NodeJs获取两个日期间的所有日期
原文地址:https://www.cnblogs.com/ding0910/p/1222655.html
最新文章
HTML
mysql参数说明
mysql索引
mysql储存过程
mysql数据库操作
初识数据库
python协程
文件操作
python day11
python day10
热门文章
Python 初识函数
Python Day8
Python Day7
Python 编码
Python 字典增删查改 嵌套
Python列表 元组
Python 字符串切片、索引、查找、统计,用户登陆验证
Python while循环、逻辑运算、编码
Day-13 内置函数(点击网址进入思维导图)、递归、二分法
Day-12 生成器
Copyright © 2011-2022 走看看