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

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

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

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

来源

2011-08-25 aknuds1

我建议正在研究使用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 -->

来源

2011-08-25 08:57:14

感谢，自动完成功能看起来还不错。我会看看我能否实现它的工作。 – aknuds1

你有提供动态查找什么建议吗？ – aknuds1

这就是你需要自己代码的东西。 @尼古拉斯·默里提供他的回答一个链接，说明这一侧。 –

如何快速的搜索？

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

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

然后，你会让jQuery把这个结果粘贴到一些div中，内容去这里

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

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

来源

2011-08-25 08:59:17

这里是一个伟大的博客post让你开始utalising jQuery的自动完成功能剃刀网页和SQL CE数据库。

来源

2011-08-25 10:28:49

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

回答

相关问题