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

两者