65.9K
CodeProject 正在变化。 阅读更多。
Home

为网站创建智能感知搜索文本框

Dain Ucak
starIconstarIcon
emptyStarIcon
starIcon
emptyStarIconemptyStarIcon

2.86/5 (6投票s)

2010 年 7 月 30 日

CPOL

3分钟阅读

viewsIcon

39130

downloadIcon

939

如何使用 Web 服务和 JavaScript 创建一个智能感知文本框，它可以无障碍地在所有平台（IE、Chrome、Firefox）上工作

引言

我试图展示一种无需 Ajax 即可创建智能感知搜索文本框的非常简单的方法。

您的项目必须支持 .NET 3.5 或更高版本，因为我们需要 Visual Studio 中的 ScriptManager 和 WebService 支持。

现在，我将尝试用我糟糕的英语告诉您步骤。对此表示抱歉。

为什么要需要一个智能感知文本框

我无法给出这个问题的答案，但如果我是一名开发人员，我必须让用户的生活更轻松。而且，这太酷了。您可以在 ASP.NET Ajax 中看到更多关于此的示例。但这对我来说是我的，也是我特别的。它非常简单且有助于理解一切。您可以下载该项目并按照我的项目进行，也可以创建一个新项目。我的建议是下载并清楚地理解源代码。

我们需要什么

在 Visual Studio 2008 中打开一个 Visual Studio ASP.NET Web 应用程序项目，并选择 .NET 3.5。

我创建了一个带有母版页的项目，因为在实际生活中，我们可能会遇到母版页和 JavaScript 的问题。我们不需要母版页，但如果我们添加一个母版页，然后添加一个 Web 内容表单，它将更有帮助。

添加一个 WebService 和一个 JavaScript 文件。在演示项目中，您可以看到一个 Access 数据库。您可以使用它，也可以创建一个新的。您不需要更多表来开始。只有一个表和一个列就足以了解它是如何工作的。您可以在App_Data文件夹中找到 Access 数据库。

将您的 ScriptManager 添加到母版页中，并且不要忘记使用 ServiceReference Path。

<asp:ScriptManager ID="scriptManager1" runat="server">
        <Services>
            <asp:ServiceReference Path="~/WebService/SearchWS.asmx" />
        </Services>
</asp:ScriptManager>

您的 Web 服务源代码

这是 Web 服务类标头中的默认内容

[WebService(Namespace = http://tempuri.org/)]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, 
// [System.Web.Script.Services.ScriptService]

但我们需要取消注释这行

[System.Web.Script.Services.ScriptService]
我们使用 Web 服务通过服务器打开一个连接，而无需回发。它是异步的。

在 HTML 页面中，我们调用 JavaScript 函数。JavaScript 函数从 WebService 调用服务器端代码，您的代码可以清楚地在没有回发的情况下工作。

现在检查JavaScript文件。您会看到一行调用 WebService 方法。

if (val != defText) {
            Search.WebService.SearchWS.mSearch(val, getRet);// check getRet function

Search 是命名空间名称。WebService是包含WebService文件的文件夹名称。SearchWS 是我的 WebService 文件名。mSearch 是一个方法，val 是方法的参数，而 getRet 是一个 JavaScript 函数，这是 WebService 成功时的参数。

这是输入文本

 <input type="text" id="txtSearch" value='<%= text %>' style="width:220px" 
  onfocus="txtFocusla('<%= text %>')" onblur="txtBlurla('<%= text %>')" 
	onkeyup="mSearch(event,this.value)" onkeydown="calledOnKeyDown(event)" />

您可以在项目中看到所有详细信息。

我更改了事件调用函数...

我使用了 onkeypress 事件来处理 Enter 键。onkeypress 事件不支持 Backspace、上箭头、下箭头以及键盘上的一些按键。Onkeyup 事件会调用我们的 Web 服务调用方法，但我们在 keydown 事件中检查上箭头和下箭头。因为 onkeyup 事件在您开始按下键盘键时发生，然后当您在向上或向下箭头键上停止手指时，您的选择选项 selectedindex 不会改变。但当您在 keydown 事件中执行此操作时，它不会产生任何问题。我没有使用 onchange 事件，因为它仅受 Internet Explorer 支持。您可以在 JavaScript 页面上清楚地看到所有函数。

以及在母版页上:

<!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">

您知道我们正在使用 XHTML，而 Firefox 在 XHTML 中不支持 innerHTML 属性，这浪费了我很多时间。但我找到了使用 DOM 的方法。您也可以在 JavaScript 文件中看到这一点。我不知道我还能说些什么。一切都在项目中，并且运行得非常清楚。

如果您有任何问题或发现任何错误，请通知我。您可以任意使用、修改和开发此项目。

关注点

这是我在这个世界上写的第一篇文章。这意味着我是个新手。如果有人读到这篇文章，请考虑这一点。

您可以在 http://www.aciliyetten.com/ - 我的网站上实时查看此项目的工作方式。您可以随时在那里联系我。

历史

  • 2010/7/28 - 添加到 CodeProject
© . All rights reserved.