Typeahead.js传递动态附加参数

Question

假设我有一个包含多个字段的表单，使用了typeahead.js进行自动补全，对于某些字段，我希望将先前填写的表单字段的值作为查询的一部分传递。例如：

<input id="First_Name" type="text">
<input id="Last_Name" type="text">

JavaScript：

$('#Last_Name').typeahead({
  name: 'typeahead',
  remote: 'Search.pl?query=%QUERY'.
  template:[
 ......
  ].join(''),
  engine: Hogan
});

由于我有多个输入框，某些输入框应将其他输入框的ID和值作为远程查询的一部分传递。我想知道是否有一种通用方法，只有在字段包含值时才将ID和值附加到此字符串中。

提前致谢。

- Dr.Avalanche

Answer 1

你可以这样做。在设置查询字符串之前使用 replace 处理它。

类似这样：

$('#Last_Name').typeahead({
  name: 'typeahead',
  remote: {
    url: 'Search.pl?query=%QUERY',
    replace: function(url, uriEncodedQuery) {
      val = $('#First_Name').val();
      if (!val) return url;
      //correction here
      return url + '&first_name=' + encodeURIComponent(val)
    },
  template: ...,
  engine: Hogan
});

- Nitzan Shaked

---

谢谢，但是有没有一种方法可以使添加新字段通用化，还是我需要为每个字段硬编码？ - Dr.Avalanche

只需编写JavaScript代码来循环遍历表单中的输入，收集它们的值，并将其附加到url。类似于$（“input”）.forEach（...），并在forEach中使用this.val()并将其URI编码形式附加到url。 - Nitzan Shaked

Answer 2

虽然这个话题有些老，但是下面的更详细的回答可能会对您有用：

如@Shaked所说，您需要使用replace函数。

1. 如果您想要动态参数

这种情况下，您希望动态参数不是typehead输入的一部分。

这种情况并不推荐，因为如果您处于这种情况下，您应该不需要typehead。

$('#myID').typeahead({
  name: 'typeahead',
  remote: {
    url: 'search.php',
    replace: function(url, uriEncodedQuery) {
      val = $('#yourValue').val();
      if (!val) return url;
      return url + '?param=' + encodeURIComponent(val)
    },
  template: ...,
});

2. 如果你想添加动态参数

这种情况更加有趣。有时候你想要获取来自其他DOM输入的一些附加参数，而它们并不是Typehead输入的一部分。

你需要使用replace，但内容是不同的：

 $('#myID').typeahead({
      name: 'typeahead',
      remote: {
        wildcard: '%QUERY',
        url: 'search.php?query=%QUERY',
        replace: function(url, uriEncodedQuery) {
          val = $('#yourValue').val();
          if (!val) return url.replace("%QUERY",uriEncodedQuery);
          return url.replace("%QUERY",uriEncodedQuery) + '&param=' + encodeURIComponent(val)
        },
      template: ...,
    });

使用这段代码，您将能够获取TypeHead输入以及一些额外的参数。

- OrcusZ