问题描述
类似于Google的搜索建议div
Search Suggestion div like google
推荐答案
// JScript File
var maxDivId, currentDivId, strOriginal;
//Our XmlHttpRequest object to get the auto suggestvar
searchReq = getXmlHttpRequestObject();
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
else if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
else {
//alert("Your Browser Sucks!\nIt's about time to upgrade don't you think?");
}
}
//Called from keyup on the search textbox.//Starts the AJAX request.
function searchSuggest(e) {
var key = window.event ? e.keyCode : e.which;
if (key == 40 || key == 38) {
scrolldiv(key);
}
else {
if (searchReq.readyState == 4 || searchReq.readyState == 0) {
var str = escape(document.getElementById('txtSearch').value);
strOriginal = str;
searchReq.open("GET", 'CreateModifyNewItem.aspx?search=' + str + '&url=' + window.location, true);
searchReq.onreadystatechange = handleSearchSuggest;
searchReq.send(null);
}
}
}
//Called when the AJAX response is returned.
function handleSearchSuggest() {
if (searchReq.readyState == 4) {
var ss = document.getElementById('search_suggest');
ss.innerHTML = '';
var str = searchReq.responseText.split("~");
if (str.length > 1) {
for (i = 0; i < str.length - 1; i++) {
//Build our element string. This is cleaner using the DOM, but
//IE doesn't support dynamically added attributes.
maxDivId = i;
currentDivId = -1;
var suggest = '<div ';
suggest += 'id=div' + i;
suggest += ' '
suggest += 'onmouseover="javascript:suggestOver(this);" ';
suggest += 'onmouseout="javascript:suggestOut(this);" ';
suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
suggest += document.onclick = function() { HideSuggDiv('this.innerHTML'); };
suggest += 'class="suggest_link">' + str[i] + '</div>';
ss.innerHTML += suggest;
ss.style.visibility = 'visible';
}
}
else {
ss.style.visibility = 'hidden';
}
}
}
//Mouse over function
function suggestOver(div_value) {
div_value.className = 'suggest_link_over';
}
function scrollOver(div_value) {
div_value.className = 'suggest_link_over';
document.getElementById('txtSearch').value = div_value.innerHTML;
}
function HideSuggDiv(value) {
var txt = document.getElementById('txtSearch');
var obj = document.getElementById('search_suggest');
var evt = window.event || arguments.callee.caller.arguments[0];
var eobj = window.event ? evt.srcElement : evt.target;
if (eobj.nodeType == 3) eobj = eobj.parentNode;
while (eobj.parentNode) {
if (eobj == obj) return;
eobj = eobj.parentNode;
}
obj.style.visibility = 'hidden';
}
//Mouse out function
function suggestOut(div_value) {
div_value.className = 'suggest_link';
}
//Click function
function setSearch(value) {
var ss = document.getElementById('search_suggest');
document.getElementById('txtSearch').value = value;
ss.innerHTML = '';
ss.style.visibility = 'hidden';
}
function scrolldiv(key) {
var tempID;
if (key == 40) {
if (currentDivId == -1) {
scrollOver(div0);
currentDivId = 0;
}
else {
if (currentDivId == maxDivId) {
tempID = 'div' + maxDivId;
var a = document.getElementById(tempID);
currentDivId = -1;
suggestOut(a)
document.getElementById('txtSearch').value = strOriginal;
}
else {
tempID = currentDivId + 1;
setScroll(currentDivId, tempID)
}
}
}
else if (key == 38) {
if (currentDivId == -1) {
tempID = maxDivId;
setScroll(maxDivId, maxDivId)
}
else {
if (currentDivId == 0) {
tempID = 'div' + currentDivId;
var a = document.getElementById(tempID);
currentDivId = -1;
suggestOut(a)
document.getElementById('txtSearch').value = strOriginal;
}
else {
tempID = currentDivId - 1;
setScroll(currentDivId, tempID)
}
}
}
}
function setScroll(Old, New) {
var tempDivId;
currentDivId = New;
tempDivId = 'div' + Old;
var a = document.getElementById(tempDivId);
suggestOut(a)
tempDivId = 'div' + currentDivId;
var b = document.getElementById(tempDivId);
scrollOver(b);
}
然后在javascript函数searchSuggest中，在您重定向它的页面上，在页面加载上写:
Then in the javascript function searchSuggest, on the page where you redirect it,write on the page load:
if (Request.QueryString["search"] != null)
{
string clientName = Request["search"].ToString();
Getresult();
}
私有无效Getresult()
{
DataTable dt = new DataTable();
//string search =从资产类型如Concat("％，""+ clientName +"''，''％)|| AssetSubType像Concat("％，' '"+ clientName +"''，''％'')||资产类型如Concat(％"，''"+ clientName +"''，''％'')限制7;
字符串搜索=从AssetType相似的资产中选择资产类型""+ clientName +"％按AssetType UNION分组从AssetAsset相似的资产中选择AssetSubType""+ clientName +"％组按AssetSubType UNION选择资产其中AssetName类似于"+ clientName +"％，按AssetName LIMIT 10"分组；
如果(myConnection.State == ConnectionState.Closed)
{
myConnection.Open();
}
命令=新的MySqlCommand(search，myConnection);
MySqlDataAdapter da =新的MySqlDataAdapter(命令);
da.Fill(dt);
StringBuilder sb = new StringBuilder();
如果(clientName！=")
{
如果(dt.Rows.Count> 0)
{
for(int i = 0; i< dt.Rows.Count; i ++)
{
sb.Append(dt.Rows [i] .ItemArray [0] .ToString()+〜"); //创建Con
//sb.Append(dt.Rows [i] .ItemArray [2] .ToString()+〜");
//sb.Append(dt.Rows [i] .ItemArray [3] .ToString()+〜");
}
}
}
Response.Write(sb.ToString());
}
在aspx页面上，在注册标记中添加ajax工具包.在referencence.and输入框中添加js文件，然后输入div和div作为搜索建议...
private void Getresult()
{
DataTable dt = new DataTable();
//string search = "Select * from assets where AssetType Like Concat (''%'',''" + clientName + "'',''%'') || AssetSubType Like Concat (''%'',''" + clientName + "'',''%'') || AssetType Like Concat(''%'',''" + clientName + "'',''%'') Limit 7";
string search = "Select AssetType from assets where AssetType Like ''" + clientName + "%'' group by AssetType UNION Select AssetSubType from assets where AssetSubType Like ''" + clientName + "%'' group by AssetSubType UNION Select AssetName from assets where AssetName Like ''" + clientName + "%'' group by AssetName LIMIT 10";
if (myConnection.State == ConnectionState.Closed)
{
myConnection.Open();
}
command = new MySqlCommand(search, myConnection);
MySqlDataAdapter da = new MySqlDataAdapter(command);
da.Fill(dt);
StringBuilder sb = new StringBuilder();
if (clientName != "")
{
if (dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
sb.Append(dt.Rows[i].ItemArray[0].ToString() + "~"); //Create Con
//sb.Append(dt.Rows[i].ItemArray[2].ToString() + "~");
//sb.Append(dt.Rows[i].ItemArray[3].ToString() + "~");
}
}
}
Response.Write(sb.ToString());
}
on the aspx page add ajax toolkit in the register tag.add js file in the refernce.and input box and div for the search suggest...
<input type="text" id="Text1" name="txtSearch" onkeyup="searchSuggest(event);"
style="width: 170px" />
<asp:HiddenField ID="HiddenField1" runat="server" />
<div id="Div4" style="z-index: 2; visibility: hidden; position: absolute;
left: 11px; width: 170px; top: 40px">
</div>
<asp:Button ID="Button1" runat="server" Text="Search" CausesValidation="False"
OnClick="btnSearch_Click" CssClass="asset-viewer-btn" OnClientClick="getSearchValue();" />
<script type="text/javascript" language="javascript">
function getSearchValue() {
var getValue = document.getElementById('txtSearch').value;
var hiddenfield = document.getElementById("<%=txtHiddenFieldSearch.ClientID%>").value = getValue;
}
</script>
受保护的无效btnSearch_Click(对象发送者，EventArgs e)
{
字符串searchValue = txtHiddenFieldSearch.Value;
//txtSearch.Value = txtSearch.Value.Replace("，").Replace("，").Trim();
字符串搜索=从资产中选择*，其中AssetType类似于''" + searchValue +％" || AssetSubType类似于" + searchValue +％" || AssetName类似于" + searchValue +％"";
如果(myConnection.State == ConnectionState.Closed)
{
myConnection.Open();
}
//OdbcCommand命令=新的OdbcCommand(search，myConnection);
命令=新的MySqlCommand(search，myConnection);
MySqlDataAdapter适配器=新的MySqlDataAdapter(search，myConnection);
DataSet ds = new DataSet();
adapter.Fill(ds);
GridView1.DataSource = ds;
GridView1.DataBind();
myConnection.Close();
}
这是我搜索的搜索按钮.
您可以使用自己的查询.
protected void btnSearch_Click(object sender, EventArgs e)
{
string searchValue = txtHiddenFieldSearch.Value;
//txtSearch.Value = txtSearch.Value.Replace(" ", "").Replace(" ", "").Trim();
string search = "Select * from assets where AssetType Like ''" + searchValue + "%'' || AssetSubType Like ''" + searchValue + "%'' || AssetName Like ''" + searchValue + "%''";
if (myConnection.State == ConnectionState.Closed)
{
myConnection.Open();
}
//OdbcCommand command = new OdbcCommand(search, myConnection);
command = new MySqlCommand(search, myConnection);
MySqlDataAdapter adapter = new MySqlDataAdapter(search, myConnection);
DataSet ds = new DataSet();
adapter.Fill(ds);
GridView1.DataSource = ds;
GridView1.DataBind();
myConnection.Close();
}
this is my search button for seraching..
You can use your own queries.
这篇关于像Google一样的搜索建议div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！