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

Posted 2023-05-07

【中文标题】Typeahead.js 在远程 url 中包含动态变量

【英文标题】：Typeahead.js include dynamic variable in remote url

【发布时间】：2013-09-12 09:22:32

【问题描述】：

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

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

【问题讨论】：

我猜那些反斜杠是 PHP 或类似的打印的残余？您应该在此处删除它们。

或者只使用单引号 '，不像其他代码那样使用反斜杠。

Mattias，我编辑了您的帖子以修复代码缩进并替换了 cmets 中的引号。希望没事:)

好吧，代码更具可读性，我不知道要问什么。您提到了school_type，我没有看到它，但假设是您希望在此请求中包含的其他一些字段。然而你说它曾经有效？这是关于做一些新的事情还是修复一些因更新而中断的事情？

感谢您的建议。是的，使用了反斜杠，因为它隐含在 PHP 代码中。我现在试过没有，它不起作用。 “school_value”是一个从另一个文本字段获取值的变量。这是因为 typeahead 需要根据 school_value 的值在特定类别中进行搜索。问题在于设置 school_value 的值，它应该在#school 更改时更改该值，但事实并非如此。如果我像这样预定义“school_value”：school_value = 'testing'，它就会完美运行。但是，当我在#school 中输入内容时，它不会改变。

【参考方案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 docs中的“替换”功能

【讨论】：

这个答案已经过时了。见@andrewtweber 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 remote options

【讨论】：

还应该注意的是，如果您正在使用准备，则默认为 %QUERY 的通配符参数的正常使用将不起作用 - 它被传递给您为准备指定的回调并且您需要自己将其放入您的 URL 中。很高兴您添加了这个更新的答案，因为它帮助了我。

【参考方案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
);

【讨论】：

很好的答案。请记住，未来的访问者使用 replace 会完全覆盖将查询字符串本地插入到 url，因此如果需要，您需要在此处执行此操作。

replace 选项似乎不再存在...在文档中找不到。

【参考方案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
);

【参考方案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
                        
                    
                ,

【讨论】：

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