javascript Typeahead.js 在远程 url 中包含动态变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18688891/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Typeahead.js include dynamic variable in remote url
提问by FooBar
I have tried for hours now, to get a variable in my "remote" path. The variable will change, depending on another input. Here is the code:
我已经尝试了几个小时，在我的“远程”路径中获得一个变量。该变量将根据另一个输入而改变。这是代码：
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
});
The variable 'school_type' is not set in the remote addr, and therefore not called.
变量“school_type”未在远程地址中设置，因此未调用。
Do you have any clue how to get it working? I have just switched from Bootstrap 2.3 to 3, and then noticed typeahead was deprecated. Above code worked on Bootstrap 2.3, but it seems like when the script is initialized, the remote path is locked.
你知道如何让它工作吗？我刚刚从 Bootstrap 2.3 切换到 3，然后注意到 typeahead 已被弃用。上面的代码适用于 Bootstrap 2.3，但似乎在脚本初始化时，远程路径被锁定。
回答by FooBar
I have found the solution! Code:
我找到了解决方案！代码：
$('#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
});
Based on this threads answer: Bootstrap 3 typeahead.js - remote url attributes
基于此线程答案：Bootstrap 3 typeahead.js - remote url attributes
See function "replace" in the typeahead.js docs
请参阅typeahead.js 文档中的“替换”功能
回答by andrewtweber
I believe the accepted answer is now out of date. The remoteoption no longer has replace. Instead you should use prepare:
我相信接受的答案现在已经过时了。该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;
}
}
});
One issue I ran into was pulling the value from another typeaheadobject. Typeahead essentially duplicates your input, including all classes, so you have two nearly identical objects, one with the tt-hintclass and the other with tt-input. I had to specify that it was the tt-inputselector, otherwise the value I got was an empty string.
我遇到的一个问题是从另一个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
回答by Kirk Northrop
There is actually a slight refinement of Mattias' answer available in the newer Bloodhound js, which reduces duplication and opportunity for error:
实际上，在较新的 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
});
回答by Andy Corman
@Mattias, Just as a heads up, you could clean up your replacemethod a little by supplying the optional urlparameter.
@Mattias，提醒一下，您可以replace通过提供可选url参数来稍微清理一下您的方法。
$('#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
});
