Javascript Typeahead.js在远程url中包含动态变量

我已经尝试了好几个小时，在我的“远程”路径中获取一个变量。变量将根据另一个输入而变化。代码如下：

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上运行，但似乎在初始化脚本时，远程路径被锁定。

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

$（“#程序”）。请提前键入({
远程：{
url:'typeahead.php？program&type=1&school_name='，
替换：函数（）{
var q='typeahead.php？program&type=1&school_name='；
if（$（'#school'）.val（））{
q+=encodeURIComponent（$（'#school'）.val（））；
}
返回q；
}
},
cache:false，
限额：10
});

基于此，答案如下：

---

参见

中的函数“replace”，在较新的《猎犬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
});

---

我相信现在公认的答案已经过时了。

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提示

类，另一个使用

tt输入

。我必须指定它是

tt输入

选择器，否则我得到的值是空字符串

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

---

@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
});

---

我和你们看的是同一件事吗

看起来又变了！文档中并没有很明显的方法，但是有示例代码。我直接从文档中的代码中提取了这个

在文档中还有第二个例子，他们用不同的方式来做！这是我认为最简洁的方法

// 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
                        }
                    }
                },

---

我猜这些反斜杠是PHP或类似软件打印出来的吗？你应该在这里删除它们。或者只使用单引号

”

，与代码的其余部分一样没有反斜杠。Mattias，我编辑了你的文章，以修复代码上的缩进，并替换了注释中的引号。希望没问题：）好吧，代码可读性更强了，我不知道要问什么。您提到了

学校类型，我没有看到，但假设您希望在此请求中包含其他字段。但你说它过去有用吗？这是关于做一些新的事情还是修复一些因更新而损坏的东西？谢谢你的建议。是的，使用反斜杠，因为它隐含在PHP代码中。我现在试着不用，但它不起作用。“school_value”是一个变量，它从另一个文本字段获取值。这是因为typeahead需要根据school_值在特定类别中搜索。问题在于设置school#u value的值时，它应该在school#u value发生变化时改变值，但它不会。如果我预先定义“学校价值”如下：
school\u value='testing'
它就可以完美地工作。但当我在学校里输入一些东西时，它不会改变。回答得很好。请记住，未来的访问者使用
replace
会完全覆盖查询字符串在url中的本机插入，因此如果需要，您需要在此处执行此操作。
replace
选项似乎不再存在。。。在文档中找不到它。还应注意，如果使用prepare，则正常使用默认为%QUERY的通配符参数将不起作用-它将传递到为prepare指定的回调中，您需要自己将其放入URL中。很高兴你添加了这个更新的答案，因为它帮助了我。这个答案已经过时了。看哈。我认为这是正确的。Typeahead已从引导中删除。现在它是一个独立的插件。