Jquery 自动完成链式请求答案

【问题标题】：Jquery Autocomplete Chained RequestsJquery 自动完成链式请求
【发布时间】：2010-10-25 15:23:10
【问题描述】：

我有一个包含两个输入字段 City 和 Venue 的页面。我有来自Devbridge 的自动完成插件，非常适合城市领域。我现在想让它在场地领域工作。我到目前为止的javascript是：

<script type="text/javascript">
    $(document).ready(function() {
        $('#Event_City').autocomplete({
          serviceUrl: '<%=Url.Action("GetCities", "Search") %>',
          minChars:2,
          width: 300,
          delimiter: /(,|;)\s*/,
          deferRequestBy: 150, //miliseconds
          params: { country: 'Yes' },
        });
        $('#Event_Venue').autocomplete({
          serviceUrl: '<%=Url.Action("GetVenues", "Search") %>',
          minChars:2,
          width: 300,
          delimiter: /(,|;)\s*/,
          deferRequestBy: 150, //miliseconds
          params: { city: $("#Event_City").val() },
        });
    });      
</script>

第二个自动完成将一个附加参数（城市）传递给我的控制器上的操作。然后，我将使用它来限制我对那个城市的场馆的回应。此参数已接收，但不包含在#Event_City 中输入的当前值。相反，它包含默认值。

有人知道在调用自动完成时如何评估值吗？

我刚开始使用 Javascript，所以请温柔一点。

谢谢，

【问题讨论】：

我正要问同样的问题。我试图“正常”传递参数，但我猜如果不使用 onchange 事件，该字段不会得到更新。

标签： javascript jquery asp.net-mvc autocomplete

【解决方案1】：

@Ian Mckay - 为了使 Venue 的 AutoComplete 能够根据城市进行过滤，您需要绑定 City 的“change”事件如下：

$(document).ready(function() {
    $('#Event_City').autocomplete({
      serviceUrl: '',
      minChars:2,
      width: 300,
      delimiter: /(,|;)\s*/,
      deferRequestBy: 150, //miliseconds
      params: { country: 'Yes' },
    }).change(function(){
        $('#Event_Venue').autocomplete({
          serviceUrl: '',
          minChars:2,
          width: 300,
          delimiter: /(,|;)\s*/,
          deferRequestBy: 150, //miliseconds
          params: { city: $("#Event_City").val() }
        });
    }); 
});

【讨论】：

您确定这不会多次将自动完成插件绑定到文本框吗？这可能很糟糕。例如，如果您更改第一个文本框的值，例如 20 次，第二个文本框是否会自动提示 20 次（因此一次对后端进行 20 次异步 ajax 调用）？ o_0
@Kyle - 我相信，你是对的。如果用户决定返回并更改城市，就会发生这种情况。标准的自动完成 jQuery 插件确实有一个可以传递的“销毁”选项，但是这个没有。

【解决方案2】：

它包含默认值的原因是因为自动完成是在页面加载时附加到文本框的。为了使用新值更新它，插件需要为您提供一种方法来更新其参数对象的属性，或者允许您在第二个元素上销毁它，然后在每次用户更改第一个元素时重建它一个人的价值。您选择的 AutoComplete 库看起来非常轻量级（并不总是一件坏事......只是在您的情况下......）并且似乎不支持此功能。

我对您的最佳建议是尝试其他库。我非常喜欢这个，因为它用途广泛（演示页面）：

http://view.jquery.com/trunk/plugins/autocomplete/demo/

【讨论】：