动态更改 Bloodhound 远程 - Javascript

在使用 Bloodhound 的策略时，我们需要通过远程获取到数据源，这样我们才能在输入框中输入关键词时进行智能匹配。但是问题来了，如果我们在输入框中动态更改了远程地址，如何通知 Bloodhound 框架重新获取数据呢？ 本文将介绍如何通过 Javascript 动态更改 Bloodhound 的远程地址，以及如何让 Bloodhound 框架重新获取数据。

准备工作

在正式开始编写代码之前，我们需要先准备以下工作：

1. 引入 jQuery 库和 Bloodhound 库。

2. 创建一个输入框和一个按钮，用于动态更改远程地址。

3. 在页面中创建一个 Bloodhound 实例，用于获取数据源。

<!-- 引入 jQuery 库和 Bloodhound 库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>

<!-- 创建输入框和按钮 -->
<input type="text" id="remote-url" placeholder="远程地址">
<button id="change-remote">更改地址</button>

<!-- 在页面中创建 Bloodhound 实例 -->
<script>
    var bloodhound = new Bloodhound({
        remote: {
            url: 'https://example.com/remote-data?q=%QUERY'
        },
        datumTokenizer: Bloodhound.tokenizers.whitespace,
        queryTokenizer: Bloodhound.tokenizers.whitespace
    });
</script>

动态更改远程地址

当用户点击更改地址按钮时，我们将通过 jQuery 获取到输入框中的地址，并将其设置为 Bloodhound 实例的远程地址。代码如下：

$('#change-remote').click(function() {
    var remoteUrl = $('#remote-url').val();
    bloodhound.remote.url = remoteUrl;
});

框架重新获取数据

更改远程地址后，我们需要通知 Bloodhound 框架重新获取数据。这可以通过调用 bloodhound.initialize() 方法实现。代码如下：

$('#change-remote').click(function() {
    var remoteUrl = $('#remote-url').val();
    bloodhound.remote.url = remoteUrl;
    bloodhound.initialize();
});

至此，我们已经成功实现了通过 Javascript 动态更改 Bloodhound 远程地址，并且让 Bloodhound 框架重新获取数据。完整代码如下：

<!-- 引入 jQuery 库和 Bloodhound 库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>

<!-- 创建输入框和按钮 -->
<input type="text" id="remote-url" placeholder="远程地址">
<button id="change-remote">更改地址</button>

<!-- 在页面中创建 Bloodhound 实例 -->
<script>
    var bloodhound = new Bloodhound({
        remote: {
            url: 'https://example.com/remote-data?q=%QUERY'
        },
        datumTokenizer: Bloodhound.tokenizers.whitespace,
        queryTokenizer: Bloodhound.tokenizers.whitespace
    });

    $('#change-remote').click(function() {
        var remoteUrl = $('#remote-url').val();
        bloodhound.remote.url = remoteUrl;
        bloodhound.initialize();
    });
</script>