【问题标题】:Autocomplete in C# using typeahead not working在 C# 中使用 typeahead 的自动完成功能不起作用
【发布时间】:2018-12-11 09:56:16
【问题描述】:

我的JS函数

<script type="text/javascript">
        $(function () {
            $("#pName").autocomplete({
                source: '@Url.Action("GetExistingProducts")'
            });
        });
</script>

ID #pNameModal 中的文本框的 ID。

我在控制器中的GetExistingProducts函数

public IEnumerable<string> GetExistingProducts()
{
    return _traceProjectService.GetAllProducts();
}

这会在我的服务中调用GetAllProducts()

public IEnumerable<string> GetAllProducts()
{
      var productList = myContext.Projects.Select(x =>x.ProductName).ToList();
      return productList;    
}

问题:

当我开始在我的文本框中输入时,我的 JS 函数没有显示现有产品。

参考文献:

  1. http://jqueryui.com/autocomplete/

如果有人能告诉我我做错了什么,我将不胜感激。谢谢。

【问题讨论】:

  • 控制台有错误吗?在您的服务器方法中放置断点是否被调用?它返回什么?
  • @Rafal:我调试了代码。没有错误。它成功地将产品列表从我的服务返回到我的控制器。
  • @PriyankaDembla Nice..您将结果转换为 JSON 格式..stackoverflow.com/questions/41321959/…
  • @ManojMaharana:转换为 Json。没有帮助。如果您可以在答案中编辑我的控制器方法,也许我会更好地理解并从那里接听。
  • @有人能帮帮我吗?

标签: javascript c# model-view-controller autocomplete jquery-ui-autocomplete


【解决方案1】:

试试这个:

<script src="~/Scripts/bootstrap3-typeahead.js"></script>

<script>

    $.ajax({
        url: '@Url.Action("GetExistingProducts", "Admin")',
        type: "GET"
    }).done(function(dt) {
        var res = dt.split(",");
        $(".pText").typeahead({
            source: res,
            showHintOnFocus: "all",
            fitToElement: true
        });
    });
    $.ajax({
        url: '@Url.Action("GetExistingVersions", "Admin")',
        type: "GET"
    }).done(function(dt) {
        var res = dt.split(",");
        $(".vText").typeahead({
            source: res,
            showHintOnFocus: "all",
            fitToElement: true
        });
    });


</script>

在控制器端

public string GetExistingProducts()
        {
            var x = yourservice.function().toList();
            string a = string.Empty;
            foreach (var item in x)
            {
                a += item + ",";
            }

            return a;


        }

【讨论】:

    猜你喜欢
    • 2018-01-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-02-28
    • 2020-11-14
    • 2014-03-11
    相关资源
    最近更新 更多