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>

正如我所说，前面的类型和数据返回对于一个是好的，然后如果我想要更改它搜索的数据集，我必须重新加载页面。因此，如果我将清单中的下拉列表更改为货件，它仍会尝试搜索清单。

Answer 1

你的问题是Bloodhound假设搜索网址只会在＆＃34;查询＆＃34;参数是。对于大多数情况，这种假设是正确的，因此他们将其作为默认值。

在您的情况下，网址应该在两个位置更改，因此Bloodhound的默认行为不够好。

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

当前query和settings作为参数传递。您需要做的就是修改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配置他们中的哪一个可以使用。

Typeahead，Bloodhound＆amp;选择数据源问题

1 个答案: