2017-08-10 13 views
-1

入力時にGoogleが検索結果を入力するのと同じように、ユーザーが検索ボックスに入力したときに結果を読み込むウェブサイトの検索を作成したいとします。私はオートコンプリートについて話しているわけではありません。MVC 4対話型検索ボックスの作成方法は?

これをMVC 4で実装する方法に関するアイデア(jqueryの有無に関係なく)

ここに私が試した記事は、動作していないようです(私はそれを台無しにするかもしれません)。記事の方法を使用したとき、私の検索ボックスはクリアされ続けました。

Interactive Search with jquery and ASP.Net MVC

EDIT:

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> 

今、私は検索ボックスにユーザーの種類として移入し、彼/彼女のタイプでは、注文番号にダウンフィルタリング検索ページを持っている

答えて

2

それは。かなり簡単です 検索結果の部分ビューを作成し、change()またはkeyup()のテキストボックスの機能(Ajaxコールを介して)を呼び出すことができます。

+0

今私は愚かだと感じます...私はchange()とは考えていませんでした。そして、keyup()も考慮しなかった! – jforward5

+0

'keyup'関数は、実際にテキストボックスからフォーカスを移動しない限り、' change'が起動しないことがあるので、より適しています。 – progrAmmar

+0

すごい!私は今それを試しています! – jforward5