如何使用 ASP.NET MVC 3 / jQuery 实现即时搜索框？答案

【问题标题】：How do I implement an instant search box with ASP.NET MVC 3 / jQuery?如何使用 ASP.NET MVC 3 / jQuery 实现即时搜索框？
【发布时间】：2011-08-25 08:54:08
【问题描述】：

我想在我的 ASP.NET MVC 3 应用程序中添加一个类似于 Google 搜索的即时搜索框。也就是说，作为进入搜索框的一种类型，应用程序应该会自动显示相应的搜索结果，并在框下方出现一个带有建议的下拉菜单。还应该有一个清除框的控件（Google 搜索框右侧的 X）。

我对 Web 应用程序开发相当陌生，但我猜想 Javascript 是必需的。我们将在这个项目中使用 jQuery，虽然我们还没有添加任何 Javascript。

那么如何实现上面指定的搜索框 UI？有现成的 jQuery 组件吗？

【问题讨论】：

标签： javascript jquery asp.net-mvc asp.net-mvc-3

【解决方案1】：

这是一个很棒的博客 post，可让您开始使用带有 Razor 网页和 SQL CE 数据库的 jQuery 自动完成功能。

【讨论】：

【解决方案2】：

我建议考虑使用 jQuery UI，因为它是 auto complete 组件。

可以安装它来查看预定义的本地数据列表或在用户键入时执行实时搜索。

使用静态查找的简单示例的代码如下：

<script>
    $(function() {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        $( "#tags" ).autocomplete({
            source: availableTags
        });
    });
    </script>



<div class="demo">

<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags">
</div>

</div><!-- End demo -->



<div class="demo-description" style="display: none; ">
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p>
<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p>
</div><!-- End demo-description -->

【讨论】：

谢谢，自动完成看起来不错。我要看看能不能让它工作。
您对提供动态查找有什么建议吗？
那是你需要自己编码的东西。 @Nicholas-Murray 在他的回答中提供了一个链接来解释这一方面。

【解决方案3】：

快速搜索如何工作？

焦点设置在文本框上。用户点击一个键，然后在 keyup javascript 事件（取决于浏览器）上，您将该文本框的内容发送到 Web 服务器。

Web 服务器将读取该内容，生成一个结果，可能是一个列出 10 个结果的视图模型，并将该结果传递回 Web 浏览器。

然后您将使用 jQuery 获取该结果并将其粘贴到某个 div 中，例如内容放在这里

这是非常基本的，但它会起作用。考虑性能很重要，因为会有很多请求发送到服务器。

编辑：关于快速搜索插件 - 是的，有一些，但你需要知道它是如何工作的以及可能会出现什么问题，所以在使用插件之前，写一些非常基本看看它是如何工作的。祝你好运。

【讨论】：