使用猎犬将DOM元素的值传递给typeahead(Pass value from DOM element into typeahead with bloodhound)

使用猎犬将DOM元素的值传递给typeahead(Pass value from DOM element into typeahead with bloodhound)

我想将隐藏输入字段中的值传递给bloodhound中的搜索远程URL参数。

该变量是动态的，每次模态弹出窗口打开时都会更新。 它的初始值为null，我相信这就是为什么它根本不起作用：

url: url + 'equipment/getSuggestions/' + $('#equipment-type-input').val() + '/%QUERY',

正如你所看到的，我正在使用jQuery，但值是空的。 可能是因为它只是在插件初始化时才获得一次？

这里是完整的脚本：

// Instantiate the Bloodhound suggestion engine var suggestions = new Bloodhound({ datumTokenizer: function (datum) { return Bloodhound.tokenizers.whitespace(datum.value); }, queryTokenizer: Bloodhound.tokenizers.whitespace, remote: { url: url + 'equipment/getSuggestions/' + $('#equipment-type-input').val() + '/%QUERY', wildcard: '%QUERY', filter: function (movies) { // Map the remote source JSON array to a JavaScript object array return $.map(movies, function (movie) { return { value: movie }; }); } } }); // Initialize the Bloodhound suggestion engine suggestions.initialize(); // Instantiate the Typeahead UI $('#equipment-id-input').typeahead(null, { displayKey: 'value', source: suggestions.ttAdapter() });

I would like to pass a value from a hidden input field to the search remote URL parameter in bloodhound.

The variable is dynamic and will get updated every time a modal popup gets open. Its initial value is null and I believe that's why this is not working at all:

url: url + 'equipment/getSuggestions/' + $('#equipment-type-input').val() + '/%QUERY',

As you can see I'm getting it with jQuery but the value is empty. Probably because it is only getting it once when the plugin is initialized?

Here the full script:

// Instantiate the Bloodhound suggestion engine var suggestions = new Bloodhound({ datumTokenizer: function (datum) { return Bloodhound.tokenizers.whitespace(datum.value); }, queryTokenizer: Bloodhound.tokenizers.whitespace, remote: { url: url + 'equipment/getSuggestions/' + $('#equipment-type-input').val() + '/%QUERY', wildcard: '%QUERY', filter: function (movies) { // Map the remote source JSON array to a JavaScript object array return $.map(movies, function (movie) { return { value: movie }; }); } } }); // Initialize the Bloodhound suggestion engine suggestions.initialize(); // Instantiate the Typeahead UI $('#equipment-id-input').typeahead(null, { displayKey: 'value', source: suggestions.ttAdapter() });

最满意答案

你可以将Bloodhound的遥控器设置为这样的东西：

remote: { url: '/equipment/getSuggestions/%EQUIPMENT/%QUERY', replace: function(url) { return url.replace('%EQUIPMENT', $('#equipment-type-input').val()).replace('%QUERY', $('input.typeahead.tt-input').val()); }, filter: function (movies) { // Map the remote source JSON array to a JavaScript object array return $.map(movies, function (movie) { return { value: movie }; }); } }

您不再需要通配符 ，因为您必须替换replace参数中的％QUERY。

I ended up solving it this way:

// Instantiate the Bloodhound suggestion engine var suggestions = new Bloodhound({ datumTokenizer: function (datum) { return Bloodhound.tokenizers.whitespace(datum.value); }, queryTokenizer: Bloodhound.tokenizers.whitespace, remote: { url: url + 'equipment/getSuggestions/', replace: function (url, query) { return url + query.toUpperCase() + '/' + $('#equipment-type-input').val() }, wildcard: '%QUERY', filter: function (numbers) { // Map the remote source JSON array to a JavaScript object array return $.map(numbers, function (number) { return { value: number }; }); } } }); // Initialize the Bloodhound suggestion engine suggestions.initialize(); // Instantiate the Typeahead UI $('#equipment-id-input').typeahead({ hint: true, highlight: true, minLength: 3 }, { limit: 7, displayKey: 'value', source: suggestions.ttAdapter(), });