Jquery搜索+ MVC3

Question

我的靈感來源於在我的網站中複製此功能。

This

後端是用PHP編寫的，即時通訊不熟悉它。真的很感激它的一些指導。任何示例代碼或僞代碼都將在.NET MVC3中得到極大的讚賞。目前，我正在消費一種搜索web服務，它將根據搜索到的標題返回一個對象。

感謝

Answer 1

你需要做的是寫一個控制器方法，將返回JSON，並採取查詢字符串作爲參數。然後使用jQueryUI自動完成來編寫客戶端。

從jQueryUI的例子：

$("#birds").autocomplete({ 
     source: "/YourController/YourMethod", 
     minLength: 2, 
     select: function(event, ui) { 
      log(ui.item ? 
       "Selected: " + ui.item.value + " aka " + ui.item.id : 
       "Nothing selected, input was " + this.value); 
     } 
    }); 

ASP.NET MVC方法：

public JsonResult YourMethod(string term) 
{ 
    return JSON(new {id=1, value="asdf"}); 
} 

這是一個示例代碼（它沒有被編譯，也不測試，因此它很可能有問題，你將需要解析）

Answer 2

後端做這件事：

1. 實際的網頁發送一個AJAX請求

   http://yourpage/givemeresults.aspx?q=my_keyword

這樣的：

$("#mytextbox").bind("change",function(){ 
    if($.trim($(this).val())=!""){ 
     $.getJSON("http://yourpage/givemeresults.aspx?q=" + $(this).val(), function(data){ 
      //add data to overlaying div and show it 
     }); 
    }  
}); 

1. 後端頁 「givemeresults.aspx」 是獲得「Q 「來自查詢字符串的值並像這樣查詢數據庫：

   從mytable中選擇名稱，如「？％」，？ = q查詢字符串中的值

2. 當結果到達時，它從結果中構建一個JSON數組，然後將其放在屏幕上。

3. 您的實際頁面會得到結果並對其進行解碼，然後建立列表。並顯示用戶。

這是autocompletes的工作風格。

，你們給腳本的鏈接的區別：

• 這使用http://qpoit.com/marcofolio_demo/apple_search/rpc.php到POST（拿不到）
• 結果不是JSON數組，列表的內容直接。它構建了列表服務器端。

其他都一樣。

需要別的東西嗎？

Answer 3

我試過的答案。有用。

腳本

google.load("jquery", "1.3.1"); 
google.setOnLoadCallback(function() 
{ 
// Safely inject CSS3 and give the search results a shadow 
var cssObj = { 'box-shadow' : '#888 5px 10px 10px', // Added when CSS3 is standard 
    '-webkit-box-shadow' : '#888 5px 10px 10px', // Safari 
    '-moz-box-shadow' : '#888 5px 10px 10px'}; // Firefox 3.5+ 
$("#suggestions").css(cssObj); 

// Fade out the suggestions box when not active 
$("input").blur(function(){ 
    $('#suggestions').fadeOut(); 
}); 
}); 

function lookup(inputString) { 
if(inputString.length == 0) { 
    $('#suggestions').fadeOut(); // Hide the suggestions box 
} else { 

$.post("/Store/Search", { videoTitle: inputString }, 

function (data) { // Do an AJAX call 
     $('#suggestions').fadeIn(); // Show the suggestions box 
     $('#suggestions').html(data); // Fill the suggestions box 
    }); 
} 
} 

的控制器

[HttpPost] 
    public JsonResult Search(string videoTitle) 
    { 
     List<Searchable> searchedList = new List<Searchable>(); 
     var auth = new Authentication() { Email = "smu@smu.com", Password = "test" }; 
     var videoList = server.Search(auth, videoTitle); 

     return Json(videoList.ToList(), JsonRequestBehavior.AllowGet); 
    } 

觀

<form id="searchform"> 
<div> 
    What are you looking for? 
    <input type="text" size="30" id="inputString" name="inputString" onChange="lookup(this.value);" /> 
</div> 
<div id="suggestions"> 
</div> 
</form> 

世界上沒有模式，因爲IM消費返回的對象列表的Web服務方法的搜索。

謝謝，希望上面的代碼可以幫助任何想要做同樣的事情的人。