如何製作MVC 4互動搜索框？

-1

我想創建一個搜索我的網站，在用戶輸入搜索框時加載結果，就像Google在輸入時填充搜索結果一樣。我不是在談論自動完成。如何製作MVC 4互動搜索框？

有關如何在MVC 4（有或沒有jQuery）實現這一點的任何想法？

這裏是我嘗試過的文章，似乎沒有工作（我可能會搞砸了）。當我使用文章中的方法時，我的搜索框不斷被清除。

Interactive Search with jquery and ASP.Net MVC

編輯：

progrAmmar有正確的方法。這是我如何實現它現在：

@using (Ajax.BeginForm("SearchOrders", new AjaxOptions{ UpdateTargetId = 
"searchResults", OnSuccess = "checkSearchChanged" })) 
{ 
     <strong>Search:</strong> @Html.TextBox("Search", null, new { @class= 
     "wide", @onkeyup = "javascript:SearchResults(this.value)" })<input 
     id="submit" type="submit" value="Search" /> 
} 

<div id="searchResults"></div> 

<script> 
function SearchResults(search) { 
    debugger; 
    $.ajax({ 
     url: "/Orders/Search/", 
     data: { ordid: search }, 
     cache: false, 
     type: "POST", 
     success: function (data) { 
      $("#searchResults").html(data); 
     }, 
     error: function (response) { 
      alert("error has occurred: " + response); 
     } 
    }); 
} 
</script>

現在我有一個在填充用戶鍵入到搜索框中，並過濾下來的訂單號，他/她的類型搜索頁面

來源

2017-08-10 jforward5

它非常簡單，您可以爲搜索結果創建部分視圖，並通過文本框的change()或keyup()函數（顯然通過Ajax調用）調用操作。

來源

2017-08-10 02:05:52 progrAmmar

現在我感到愚蠢......我沒有想到改變（），現在你提到它就是明顯的。甚至沒有考慮keyup（）！ – jforward5

'keyup'函數將會更適合，因爲有時候'change'可能不會觸發，直到您將焦點移出文本框。 – progrAmmar

太棒了！我正在嘗試它！ – jforward5

如何製作MVC 4互動搜索框？

回答

相關問題