使用 JavaScript 在 ASP.NET/ASP 中模拟 Google 建议

• 下载完整代码 - 2.18 KB

引言

本文介绍了一种实现，仅在用户界面方面类似于“Google 建议”，并未采用服务器回调来实现实际的“Google 建议”概念。该实现完全是使用简单的 JavaScript 对数据进行客户端显示管理。它不涉及使用服务器回调、Ajax 或 XMLHttp 对象。
在了解以下需求后，这一点将更加清晰。

背景

我有一个现有的 ASP.NET/ASP 应用程序，用于 DBA 工作跟踪。该应用程序的一个重要页面是工作录入页面，用户可以在其中选择数据库详细信息等。该页面包含一个包含大量服务器名称（名称）的下拉列表。

应用程序的用户非常熟悉服务器名称，但由于下拉列表过长，向下滚动、搜索和选择所需的名称变得非常困难——更常见的是无法选择位于滚动条底部的名称。

解决方案

我的解决方案是用类似 Google 建议的东西来替换/使用下拉列表——当用户键入服务器名称的开头字母时，它应该显示相似的名称。

实现

我的解决方案是一个简单的 JavaScript 客户端代码，不使用任何 Ajax、服务器端代码或 XMLhttp 对象。我使用了两个控件：

1. TextBox – 用于输入名称的开头字母。

   <input type=text name="txtSystemNamesList" id="txtAjaxSystemList"  
   	önkeyup="GetSuggestNames(this.value)" >

2. Div – 用于显示匹配的名称。

   <div class="tip" id=""divSystemList"" 
   	önmouseover=""javascript:style.cursor='hand';""></div>

Div 标签放置在 textbox 正下方，具有相同的长度和样式属性，并且默认情况下可见性设置为 'hidden'。

将要显示的名称列表加载到客户端 Array 变量中。用于下拉列表数据源的服务器端代码已经可用，可以生成名称列表。

//Fill the NamesArray and IDsArray with SystemNames and SystemId values   
    <% for(int i=0; i<nameslist.rows.count; arrsystemnameslist[
    <%="i" arrsystemidslist[<%="i" %>]=""<%=NamesList.Rows[i]["Name"].ToString()%>";" />

在 TextBox 的 onkeyup 事件上调用一个 JavaScript 函数 - GetSuggestNames(this.value)。此函数将 Textbox 中键入的字母与数组中存在的名称列表进行比较，并返回所有以键入的字母开头的匹配名称。

//Gets the Names starting with the entered text in TextBox 
        GetSuggestNames = function(strSystemListText)
            {
	            var divSystemList =  document.getElementById("divSystemList");
	            if(strSystemListText.length >0)
                   {
                         divSystemList.innerHTML = ShowSuggestDiv(strSystemListText);
                         divSystemList.style.visibility = 'visible';
                   }
                   else
                   {
	                    divSystemList.innerHTML ="";
                        divSystemList.style.visibility = 'hidden';
                   }
            }

结果集的每一行都格式化为 HTML 锚标签，并将这些标签作为字符串添加到 Div 标签中。将 Div 的可见性更改为 'visible'，如果 Div 中有更多匹配的名称，则应显示滚动条。

//Returns the Text for the Div with the hyperlinks  */
	        ShowSuggestDiv = function(strKey)
	        {
		        var strDivText = "";
		        var suggestCount = 11;
		        for(i=0;i<arrsystemnameslist.length; +=""
			<a" if(arrsystemnameslist[i].substring
			(0,strkey.length).touppercase()="=" !="0)" 
			önclick="\"SelectSuggestedName(""" + 
			arrSystemNamesList[i] + ""; 
			suggestCount--;
		}
		}
		}
		//Show a vertical Scrollbar to Div if the matching names 
		//are more than 3
		if(suggestCount > 3)
		{
		    var divSystemList =  document.getElementById("divSystemList");
                      divSystemList.style.height="50px";
		    divSystemList.style.overflow="scroll";
		    divSystemList.style.overflowX= "visible";
		}
		return strDivText;
	    }

从匹配的名称列表中，用户可以单击所需的名称。单击名称后，该值将被复制到 Textbox 字段中，并且 Div 属性将重置为 'hidden'。

// Fills the TextBox with the selected name in the Suggest Div, 
//Selects the corresponding element in the hidden NamesList 
SelectSuggestedName	 = function(intPos)
{
    var systemlist = document.getElementById("ddlNames");
    document.getElementById("txtSystemNamesList").value= arrSystemNamesList[intPos];
    document.getElementById("ddlNames").value= intPos+1;
    //ddlNames.selectedIndex = intPos;
    var divSystemList =  document.getElementById("divSystemList");
    divSystemList.style.visibility = 'hidden';
}

结束语

此实现也可以在下拉列表旁边的单独面板中使用，并在需要时显示。

希望在我的下一篇文章中介绍使用 XMLHttp 对象在 ASP.NET 和 JavaScript 中实现“Google 建议”的方法。

希望本文对您有所帮助。祝您编程愉快！

历史

• 2009 年 12 月 8 日：初始发布