Question

我是在我的索引页面上的搜索框中使用jQuery AutoComplete的初学者：

JS：

<script type="text/javascript">
$(document).ready(function () {
    $('#searchName').autocomplete({
        source: '@Url.Action("GetUsers", "Home")'
    });
});
</script>

HTML：

<div id="searchbox" style="float:left;">@Html.TextBox("searchName", null, new { @placeholder = "Name" })

控制器：

      public JsonResult GetUsers(string term)
  {
      Context db = new Context();
      List<string> users;
   .
   .
   .
      return Json(users, JsonRequestBehavior.AllowGet);
  }

现在，自动填充工作正在运行，但我的问题是如何将自动填充源的下拉列表连接到另一个功能，其中搜索了一组不同的用户？

换句话说，我需要自动完成功能的来源根据从下拉列表中选择的值进行更改。

这可能吗？

谢谢！

Answer 1

您可以为源选项指定一个函数：http://api.jqueryui.com/autocomplete/#option-source

使用这种方法，您可以更新javascript，以便更好地控制GET调用，以便传入第二个参数：

<script type="text/javascript">
$(document).ready(function () {
    $('#searchName').autocomplete({
        source: function (request, response) {
           jQuery.get('@Url.Action("GetUsers", "Home")', {
               term: request.term,
               otherId: $('#otherDdl').val()
           }, function (data) {
               response(data);
           });
        }
    });
});
</script>

然后在服务器上，您可以检查传入的otherId并根据该更改来源。

  public JsonResult GetUsers(string term, int otherId)
  {
      Context db = new Context();
      List<string> users;

      if(otherId == ???)
      // Default search
      else
      // Search alternate location

     .
     .
     .
      return Json(users, JsonRequestBehavior.AllowGet);
  }

Answer 2

自动填充source接受回调函数用于根据下拉值构建数据，例如：

    if(dropdown.val() == 1){
       // hard-coded - get from external source
       var data = [{ "label": "test1", "value": "test1" },
               { "label": "test2", "value": "test2" },
               { "label": "test3", "value": "test3" } ];
    } else{
         ....
    }

然后在自动完成源中将其分配给响应：

source: function (request, response) {
  response(data);                                        
},

如何根据下拉选择更改jquery ui自动完成源

2 个答案: