如何使用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實現即時搜索框？

回答

相關問題