Question

控制器

public ActionResult Search(string id)
{
     id= Request.QueryString["term"];         
     var routeList = db.Movies.Where(r => r.Title.Contains(id))
                   .Take(5)
                   .Select(r => new { id = r.MovieID, label = r.Title, name = "MovieID" });
     return Json(routeList, JsonRequestBehavior.AllowGet);
}

查看：

<input type="hidden"   id="MovieID"  name="MovieID" />
<input type="text" id="SelectedMovie" value=""/>
<script type="text/javascript" language="javascript">
   $("#SelectedMovie").autocomplete({
       source: function (request, response) {
           $.ajax({
              url: "/Transaction/Search", type: "POST", dataType: "json",                        
              data: { id: request.term }, 
              success: function (data) {
              response($.map(data, function (item) {                                
                return { label: item.label, value: item.id }; //updated code
               }));
             }
         });
     },
     select: function (event, ui) {
         $("#MovieID").val(ui.item.value);
         $("#SelectedMovie").val(ui.item.label);
         return false;
     }
  });
</script>

我有一些视频存储应用。当我去租电影时，我需要一个带有电影的组合框，我可以使用自动完成功能进行选择。还要求只有ID（值）保存到数据库而不是文本本身。

编辑：这是完整的工作实例

Answer 1

由于您只将字符串传递给服务器端的Search()函数，因此需要更改通过data调用传递的$.ajax()元素。

public ActionResult Search(string id)//I think that the id that you are passing here needs to be the search term. You may not have to change anything here, but you do in the $.ajax() call
{
      id= Request.QueryString["term"];

      var routeList = db.Movies.Where(r => r.Title.Contains(id))//this is a text filter no?
                        .Take(5)
                        .Select(r => new { id = r.MovieID, label = r.Title, name = "MovieID" });
      return Json(routeList, JsonRequestBehavior.AllowGet);
}

$("#MovieID").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/Transaction/Search", type: "POST", dataType: "json",
            //original code
            //data: { searchText: request.id, maxResults: 10 },
            //updated code; updated to request.term 
            //and removed the maxResults since you are not using it on the server side
            data: { id: request.term },

            success: function (data) {
                response($.map(data, function (item) {
                    //original code
                    //return { label: item.FullName, value: item.FullName, id: item.TagId }; 
                    //updated code
                    return { label: item.label, value: item.label, id: item.id };
                }));
            },
        select: function (event, ui) {
                //update the jQuery selector here to your target hidden field
            $("input[type=hidden]").val(ui.item.id);
        }
        });
    },
});

让我知道这是否有效/帮助！

Answer 2

.ajax()未在id中指定data{}来电。它不在你的querystring对象中，也不在Request.QueryString["term"]作为url参数的一部分（任何一种方法都可以）。

因此，Action方法中的空值。

无论如何，您立即用Action覆盖了方法的id参数。为什么这样做？

而不是在方法中询问请求“术语” 方法将其作为参数本身绑定到public ActionResult Search(string term) { var routeList = db.Movies.Where(r => r.Title.Contains(term)) .Take(5) .Select(r => new { id = r.MovieID, label = r.Title, name = "MovieID" }); return Json(routeList, JsonRequestBehavior.AllowGet); }方法，如下所示：

{{1}}

Answer 3

首先，您应该使用函数中的以下返回值：

return { label: item.title, value: item.id };

根据documentation，您必须返回具有label和value属性（无id属性）的对象。标签是用户看到的，值是发布到服务器的值。

其次，您在Ajax调用中传递searchText和maxResults，因此您的操作方法应该有两个参数：public ActionResult Search(string searchText, int maxResults)。

您可以应用这些更改并查看它是否有效吗？

具有值和文本字段的ASP.NET MVC jquery自动完成

3 个答案: