【问题标题】:MVC3 Razor jQuery autocomplete passes Back values but nothing displaysMVC3 Razor jQuery 自动完成传递返回值但没有显示
【发布时间】:2011-10-19 03:41:54
【问题描述】:

我的自动完成功能有问题,它会点击控制器并返回值,但页面上没有显示任何内容,我提供了下面的代码,感谢任何帮助。

HomeController方法

[HttpPost]
    public JsonResult  GetAccounts(string id)
    {
        var accounts = NavRepository.GetAccountsBasedOnString(id);

        return Json(accounts, JsonRequestBehavior.AllowGet);
    }

关于.cshtml

 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript">      </script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript">      </script>


<script type="text/javascript">
$(function () {
    $('#searchTerm').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '@Url.Action("GetAccounts", "Home")',
                data: { id: request.term },
                dataType: 'json',
                type: 'POST',
                minLength: 3,
                success: function (event, ui) {
                    searchTerm.valueOf (ui.item.value);
                }
            });
        } 
    });
});

</script>

@using (Html.BeginForm())
{               
<form method="post" action="">
 <input id="searchTerm" name="searchTerm" type="text" />
     <input type="submit" value="Go" />
 </form>
} 

编辑: 下面是我的最终功能

  $(function () {
    $('#searchTerm').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '@Url.Action("GetAccounts", "Home")',
                data: { id: request.term },
                dataType: 'json',
                type: 'POST',
                minLength: 3,
                success: function (data) {
                    response(data); ;
                }
            });
        } 
    });
});

【问题讨论】:

  • 控制器操作返回的 JSON 是什么样的?

标签: jquery asp.net-mvc-3 razor jquery-autocomplete


【解决方案1】:

一些事情:

  1. 您需要将小部件提供的response 函数调用给您提供的source 函数。此外,您似乎将自动完成的选项之一 (minLength) 与 AJAX 调用混合在一起:

    $('#searchTerm').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '@Url.Action("GetAccounts", "Home")',
                data: { id: request.term },
                dataType: 'json',
                type: 'POST',
                success: function (data) {
                    response(data); // You may have to perform post-processing here depending on your data.
                }
            });
        },
        minLength: 3
    });
    
  2. 此外,请确保您为小部件提供了它所期望的数据。您需要为 response 函数提供一个字符串数组,例如:

    ["Item1", "Item2", "Item3"]
    

    或者,您可以提供具有 label 属性、value 属性或两者兼有的对象数组:

    [{ label: "Item1", value: "1" }, { label: "Item2", value: "2" }]
    

    您可能已经这样做了,但我必须看看您的控制器操作返回什么。

【讨论】:

  • 我改变了这条线并使它工作感谢安德鲁。成功:函数(数据){响应(数据); ;
猜你喜欢
  • 1970-01-01
  • 2023-03-24
  • 1970-01-01
  • 2015-10-24
  • 1970-01-01
  • 2018-10-09
  • 2018-04-16
  • 2011-08-17
  • 1970-01-01
相关资源
最近更新 更多