jquery - Typeahead、Bloodhound 和选择数据源问题

Question

我有一个这样的脚本:

<script>
        $(document).ready(function() {
            var searchType = $('select[name=searchType]').val();
            var bloodhound = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.whitespace,
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {
                    url: '/'+searchType+'/find?q=%QUERY%',
                    wildcard: '%QUERY%'
                },
            });

            $('#search').typeahead({
                hint: true,
                highlight: true,
                minLength: 3
            }, {
                name: searchType,
                source: bloodhound,
                display: function(data) {
                    return data.name  //Input value to be set when you select a suggestion. 
                },
                templates: {
                    empty: [
                        '<div class="list-group search-results-dropdown"><div class="list-group-item">Nothing found.</div></div>'
                    ],
                    header: [
                        '<div class="list-group search-results-dropdown">'
                    ],
                    suggestion: function(data) {
                        if(searchType == "shipments"){
                            return '<a href="/shipments/i/'+data.UUID+'"><div style="font-weight:normal; margin-top:-10px ! important;" class="list-group-item">' + data.pro_number + ' - Date: '+ data.date +'</div></a></div>'
                        }else if(searchType == "manifests"){
                             return '<a href="/carrier/manifests/view/'+data.id+'"><div style="font-weight:normal; margin-top:-10px ! important;" class="list-group-item">' + data.manifestNumber + ' - Origin: '+ data.terminalOrigin +'</div></a></div>'
                        }else if(searchType == "customers"){
                            return '<a href="/customers/i/'+data.url_string+'"><div style="font-weight:normal; margin-top:-10px ! important;" class="list-group-item">' + data.customer_name +'</div></a></div>'
                        }
                    }
                }
            });                         
        });
    </script>

在大多数情况下，我相信它是有效的。问题是它坚持一种选择，而不是在任何给定时间一旦选择一项就改变选择。

我的搜索表单相当简单:

<form class="sidebar-form">
        <div class="input-group">
          <input type="text" name="search" class="form-control" placeholder="Search Pro Number" id="search">

          <span class="input-group-btn">
              <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
              </button>
            </span>
        </div>
          <select name="searchType" class="form-control">
                <option value="" selected>Search Type</option>
                <option value="shipments">Shipments</option>
                <option value="manifests">Manifests</option>
                <option value="customers">Customers</option>
            </select>
      </form>

正如我所说，前面的类型和数据返回都很好，然后如果我想更改它搜索的数据集，我必须重新加载页面。因此，如果我将下拉列表从 list 更改为发货，它仍然会尝试搜索 list 。

Answer 1

您的问题是 Bloodhound 假定搜索 URL 仅在“查询”参数所在的位置发生变化。对于大多数情况，这个假设是正确的，因此他们将其设为默认值。

在您的情况下，URL 应该在两个处发生变化，因此 Bloodhound 的默认行为还不够好。

通过提供 prepare 函数可以轻松覆盖默认行为，该函数可以在请求之前对 Bloodhound 的设置进行更广泛的更改。

当前查询和设置作为参数传递。您所需要做的就是修改settings.url:

var bloodhound = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'required, but will be overridden in prepare() anyway',
        prepare: function (query, settings) {
            var searchType = $('select[name=searchType]').val();

            settings.url = '/' + searchType + '/find?' + $.param({
                q: query
            });

            return settings;
        }
    }
});

另一种方法是使用 N 个不同的 bloodhound 实例，每个实例对应每个可能的 searchType 值，但每个实例都有一个固定的 URL，然后在typeahead 配置要使用其中的一个。