JQuery自動完成+ Asp.net MVC

Question

我在我的Asp.net MVC項目中使用JQuery自動完成插件。到目前爲止，我從我的搜索方法返回一個字符串列表，這些字符串顯示正確。

在我看來：

<script type="text/javascript"> 
    $(function() { 
    $("#search").autocomplete({ 
    source: '<%: Url.Action("Search") %>', 
    minLength: 1 
    }); 
    }); 
</script> 

控制器：

public JsonResult Search(string term) 
{ 
    //search Code here ... 
    var dt = ....; 
    var result = new List<string>(); 
    //search Code returns a DataTable, which I convert into a List<string> 

    for (int i = 0; i < dt.Rows.Count; i++) 
    { 
     result.Add(...); 
    } 

    //return List<string> to the autocomplete plugin 
    return Json(result, JsonRequestBehavior.AllowGet); 
} 

我不知道是否有可能返回一個DataTable對象，並顯示在一個HTML表格中的數據表。或者有可能返回一個HTML表格？有沒有人嘗試過這樣的事情？

非常感謝

Jaspis

Answer 1

你可以看看在custom data and display樣品。

Answer 2

第1步：獲取網絡API準備

讓我們先創建一個網頁API方法將使用搜索項查詢從自動完成文本發送回項目（藝術家）的列表。在這篇文章中，我沒有使用數據庫，而是使用List來保持這個例子儘可能簡單。

下面是我如何定義我的藝術家類

public class Artist 
{ 
    public int Id { get; set; } 
    public int Name { get; set; } 
}  

接下來，我創建了一個網絡API GET方法將使用在自動完成的文本框，並用LINQ的幫助不大輸入的搜索項會返回匹配結果的列表。

using System.Collections.Generic; 
using System.Linq; 
using System.Web.Http; 

namespace Autocomplete.Controllers 
{ 
    public class ArtistApiController : ApiController 
    { 

     public List<Artist> ArtistList = new List<Artist> 
     { 
      new Artist{Id = 1, Name = "Sonu Nigam"}, 
      new Artist{Id = 2, Name = "Sunidhi Chauhan"}, 
      new Artist{Id = 3, Name = "Shreya Goshal"}, 
      new Artist{Id = 4, Name = "Mohit Chauhan"}, 
      new Artist{Id = 5, Name = "Nihkil Dsouza"}, 
      new Artist{Id = 6, Name = "Kailash Kher"}, 
      new Artist{Id = 7, Name = "Atif Aslam"}, 
      new Artist{Id = 8, Name = "Ali Zafar"}, 
      new Artist{Id = 9, Name = "Shafaqat Ali"}, 
      new Artist{Id = 10, Name = "Shankar Madahevan"} 
     }; 


     // GET api/values 
     public IEnumerable<Artist> Get(string query) 
     { 
      return ArtistList.Where(m => m.Name.Contains(query)).ToList(); 
     } 
    } 
} 

我們的服務器端代碼已準備就緒！時間來測試它。

第2步：客戶端代碼

包括jQuery的ui.js和jquery.ui.css在HTML

<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js" ></script> 
<script type="text/javascript" src="~/Scripts/jquery-ui-1.8.20.min.js" ></script> 
<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" /> 

<div id="body"> 
    <label for="autocomplete-textbox">Search : </label> 
    <input type="text" id="autocomplete-textbox" /> 
</div> 

<script type="text/javascript"> 
$(document).ready(function(){ 
$('#autocomplete-textbox').autocomplete({ 
    source: function (request, response) { 
     // prepare url : for example '/api/artistapi?query=sonu 
     var autocompleteUrl = '/api/artistapi' + '?query=' + request.term; 
     $.ajax({ 
      url: autocompleteUrl, 
      type: 'GET', 
      cache: false, 
      dataType: 'json', 
      success: function (json) { 
       // call autocomplete callback method with results 
       response($.map(json, function (data, id) { 
        return { 
         label: data.Name, 
         value: data.Id 
        }; 
       })); 
      }, 
      error: function (xmlHttpRequest, textStatus, errorThrown) { 
       console.log('some error occured', textStatus, errorThrown); 
      } 
     }); 
    }, 
    minLength: 2, 
    select: function (event, ui) { 
     alert('you have selected ' + ui.item.label + ' ID: ' + ui.item.value); 
     $('#autocomplete-textbox').val(ui.item.label); 
     return false; 
    } 
}); 
}); 
</script> 

這裏有一點要注意的是，在成功的方法裏面我用了下面的代碼：

response($.map(json, function (data, id) { 
    return { 
     label: data.Name, 
     value: data.Id 
    }; 
})); 

data.Id and data.Name被使用，因爲在ajax響應中（如下所示）數據以此格式返回。

步驟3：測試&輸出：

從here

兩者