14

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

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

4

5 回答 5

14

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

$('#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 文档中的“替换”功能

于 2013-09-09T08:19:59.190 回答
11

我相信接受的答案现在已经过时了。该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

猎犬远程选项

于 2015-09-26T20:54:27.953 回答
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
});
于 2014-09-04T14:20:36.360 回答
0

@Mattias, Just as a heads up, you could clean up your replace method a little by supplying the optional url parameter.

$('#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
});
于 2015-10-27T18:33:21.660 回答
0

我看的和你们一样吗？

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
                        }
                    }
                },
于 2020-06-05T13:37:02.297 回答