0

我在我的 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 表中显示 DataTable。或者是否可以返回一个 HTML 表格？有没有人尝试过这样的事情？

非常感谢

贾斯皮斯

4

2 回答 2

1

第 1 步：准备好 Web API

让我们首先创建一个web api 方法，该方法将使用从自动完成文本框发送的搜索词查询返回项目列表（艺术家） 。在这篇文章中，我没有使用数据库，而是使用 List 来使这个示例尽可能简单。

下面是我如何定义我的 Artist 类

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

接下来，我创建了一个Web 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 步：客户端代码

在你的 html 中包含 jquery-ui.js 和 jquery.ui.css

<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和data.Name是因为在 ajax 响应中（如下所示），数据以这种格式返回。

在此处输入图像描述

第 3 步：测试和输出：

在此处输入图像描述

取自这里

于 2013-04-27T13:08:59.547 回答
0

您可以查看自定义数据和显示示例。

于 2010-11-25T15:35:18.050 回答