Question

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

我是网络应用程序开发的新手，但我猜Javascript是必需的。我们将在这个项目中使用jQuery，虽然我们还没有添加任何Javascript。

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

Answer 1

这是一个很棒的博客post，可以帮助您开始使用Razor网页和SQL CE数据库进行jQuery自动完成。

Answer 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 -->

Answer 3

快速搜索如何运作？

焦点设置在文本框中。用户点击密钥和keyup javascript事件（取决于浏览器），您将该文本框的内容发送到Web服务器。

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

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

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

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

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

3 个答案: