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

Posted 2023-05-09

【中文标题】如何根据下拉选择更改 jquery ui 自动完成源

【英文标题】：How to change jquery ui autocomplete source based on dropdown selection

【发布时间】：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);
  

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

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

这可能吗？

谢谢！

【参考方案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);                                        
,