像Google一样的搜索建议div

本文介绍了像Google一样的搜索建议div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

类似于Google的搜索建议div

Search Suggestion div like google

推荐答案

这是Javascript，请将其添加到Javascript文件中 This is Javascript,add it in your Javascript File // 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" />&nbsp; <asp:HiddenField ID="HiddenField1" runat="server" /> <div id="Div4" style="z-index: 2; visibility: hidden; position: absolute; left: 11px; width: 170px; top: 40px"> </div> &nbsp;&nbsp;&nbsp;&nbsp;<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.