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

【问题标题】：How to change jquery ui autocomplete source based on dropdown selection如何根据下拉选择更改 jquery ui 自动完成源
【发布时间】：2016-07-11 00:40:42
【问题描述】：

我是在我的索引页面的搜索框中使用 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);
  }

现在，自动完成功能正在工作，但我的问题是如何连接一个下拉菜单，将自动完成的来源更改为不同的功能，在其中搜索不同的用户集？

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

这可能吗？

谢谢！

【问题讨论】：

标签： c# jquery asp.net-mvc jquery-ui autocomplete

【解决方案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);
  }

【讨论】：

term 在文本框中输入的字符串是否正确？条件不应该基于下拉列表中的值吗？我明白你在说什么，但是如何将下拉列表中的值注入到 if 语句中？
更新了我的回复以包含选择列表。在我的示例中，选择列表的名称是 'otherDdl'
好的，还有一件事。视图中的 ddl 呢？我需要为此做些什么特别的事情吗？
不，您将像往常一样填充 ddl，然后当用户在“#searchName”中键入内容时，自动完成功能将读取 ddl 选择的值以将其包含在 get 请求中。

【解决方案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);                                        
},

【讨论】：