Typeahead.js 如何在远程URL中包含动态变量？

Question

我已经花了几个小时，试图在我的“远程”路径中获取一个变量。这个变量将根据另一个输入而改变。这是代码：

school_value = $('#school').val();
$('#school').change(function () {
    school_value = $(this).val();
    $('#programme').typeahead('destroy'); // I have also tried with destroy - but it doesnt work.
});
$('#programme').typeahead({
    remote: 'typeahead.php?programme&type=1&school_name=' + school_value,
    cache: false,
    limit: 10
});

变量“school_type”没有在远程地址中设置，因此没有被调用。

你有什么线索可以让它工作吗？我刚从Bootstrap 2.3切换到3，然后注意到typeahead已经被弃用了。以上代码在Bootstrap 2.3上有效，但似乎当脚本初始化时，远程路径被锁定了。

- FooBar

---

我猜这些反斜杠是由 PHP 或类似的程序打印出来的遗留物？你应该在这里将它们移除。 - Dave

或者只使用单引号'，不像您代码中的其他部分需要反斜杠。 - Sergio

Mattias，我编辑了你的帖子，修复了代码的缩进，并按照评论中的建议替换了引号。希望这样可以。 :) - Sergio

代码更易读了，但我不知道正在被要求什么。你提到了 school_type，但我没有看到它，我猜想这是你想在此请求中包含的其他字段。然而，你说它以前可以工作？这是关于做一些新事情还是修复更新后出现的问题？ - Dave

感谢您的建议。是的，反斜杠被使用了，因为它在 PHP 代码中是隐含的。我现在已经尝试过不用反斜杠，但它不起作用。"school_value" 是一个变量，它从另一个文本字段中获取值。这是因为 typeahead 需要根据 school_value 的值在特定类别中搜索。问题在于设置 school_value 的值，它应该在 #school 更改时更改值，但它没有。如果我像这样预定义 "school_value": school_value ='testing'，那么它就完美地工作了。但当我在 #school 中输入内容时，它就无法更改。 - FooBar

Answer 1

我已经找到了解决方案！代码：

$('#programme').typeahead({
    remote: {
        url: 'typeahead.php?programme&type=1&school_name=',
        replace: function () {
            var q = 'typeahead.php?programme&type=1&school_name=';
            if ($('#school').val()) {
                q += encodeURIComponent($('#school').val());
            }
            return q;
        }
    },
    cache: false,
    limit: 10
});

根据这个线程的答案：Bootstrap 3 typeahead.js - remote url attributes。

请参阅typeahead.js文档中的“replace”函数。

- FooBar

---

这个答案已经过时了。请查看@andrewtweber的答案（https://dev59.com/TGMl5IYBdhLWcg3wHTug#32801930）。 - ollazarev

Answer 2

我认为现在已经过时的是被接受的答案。 remote选项不再具有replace。相反，您应该使用prepare：

$('#programme').typeahead({
    remote: {
        url: 'typeahead.php?programme&type=1&school_name=',
        prepare: function (query, settings) {
            settings.url += encodeURIComponent($('#school').val());

            return settings;
        }
    }
});

我遇到的一个问题是从另一个typeahead对象中提取值。Typeahead本质上是复制您的输入，包括所有类，因此您有两个几乎相同的对象，一个带有tt-hint类，另一个带有tt-input类。我必须指定它是tt-input选择器，否则我得到的值将为空字符串。

$('.field-make').val();  // was "" even though the field had a value
$('.field-make.tt-input').val();  // gave the correct value

Bloodhound 远程选项

- andrewtweber

---

需要注意的是，如果您正在使用prepare功能，则默认为%QUERY的通配符参数的正常用法将无法工作 - 它会被传递到您为prepare指定的回调函数中，您需要自己将其放入URL中。很高兴看到你添加了这个更新的答案，它帮助了我。 - unenthusiasticuser

Answer 3

在更新的Bloodhound js中，实际上有一个稍微改进了Mattias'答案的方法，它减少了重复和出错的机会。

$('#programme').typeahead({
    remote: {
        url: 'typeahead.php?programme&type=1&school_name=',
        replace: function (url, query) {
            if ($('#school').val()) {
                url += encodeURIComponent($('#school').val());
            }
            return url;
        }
    },
    cache: false,
    limit: 10
});

- Kirk Northrop

---

好的答案。请记住，对于未来的访问者来说，使用“replace”完全覆盖了查询字符串在URL中的原生插入方式，因此如果必要，您需要在此处执行该操作。 - KyleMit

“replace”选项似乎不再存在了...在文档中找不到它。 - Alvaro

Answer 4

@Mattias，提醒一下，你可以通过提供可选的url参数来简化你的replace方法。

$('#programme').typeahead({
    remote: {
        url: 'typeahead.php?programme&type=1&school_name=',
        replace: function (url, query) {
            // This 'if' statement is only necessary if there's a chance that the input might not exist.
            if ($('#school').val()) {
                url += encodeURIComponent(('#school').val());
            }
            return url;
        }
    },
    cache: false,
    limit: 10
});

- Andy Corman

Answer 5

我看到的和你们看到的一样吗？

http://www.runningcoder.org/jquerytypeahead/

看起来又变了！文档中并不是很明显该如何操作，但有示例代码。我直接从文档中的代码中提取了这个。

文档中还有第二个示例，他们使用了另一种方式！我认为这种方式最简洁。

// Set a function that return a request object to have "dynamic" conditions
dynamic: true,
source: {
    tag: {
        ajax: function (query) {
            if (query === "hey") {
                query = "hi"
            }
            return {
                url: "http://www.gamer-hub.com/tag/list.json",
                dataType: "jsonp",
                path: data,
                data: {
                    q: query
                }
            }
        }
    }
}

这是我的工作示例：

                source: {
                    ajax: function() {
                        var filter = {
                            partnerId: @Model.PartnerId,
                            productTypeId: @Model.ProductTypeId,
                            unitType: $("[name=UnitType]").val(),
                            manufacturer: "",
                            columnName: "@nameof(SaleViewModel.Manufacturer)"
                        };
                        var queryString = $.param(filter);
                        return {
                            url: recentEntriesBaseUrl + "?" + queryString
                        }
                    }
                },

- Jess

---

哈。我认为这是正确的。Typeahead已从Bootstrap中删除。现在它是一个单独的插件。 - Jess

Answer 6

如果您想使用通配符参数%QUERY，则需要添加url = url.replace("%QUERY", q);。

$('#programme').typeahead({
    remote: {
        url: 'typeahead.php?programme&q=%QUERY',
        replace: function (url, q) {
            url = url.replace("%QUERY", q);
            let val = $('#school').val();
            if(val) url += '&school_name=' + encodeURIComponent(val);
            return url;
        }
    },
    limit: 10
});

- Mike S