标签: bloodhound

我正在使用带有typeahead/bloodhound的bootstrap-tokenfield.

我可以阻止在令牌字段中使用相同的令牌两次,但同样的令牌仍然出现在先行响应中.如何排除令牌字段中已有的令牌？

var engine = new Bloodhound({
  remote: {
    url: API_URL + '?action=message_friends&q=%QUERY',
    filter: function (response) {
      return $.map(response.users, function (user) {
        return {
          value: user.user_id,
          label: user.name
        };
      });
    }
  },
  datumTokenizer: function(d) {
    return Bloodhound.tokenizers.whitespace(d.value); 
  },
  queryTokenizer: Bloodhound.tokenizers.whitespace    
);

engine.initialize();

$('#to-tags').tokenfield({
  typeahead: [
    {
      hint: false
    }, 
    {
      name: 'users',
      displayKey: 'label',
      source: engine.ttAdapter()
    }
  ]
}).on('tokenfield:createtoken', function (event) {
  var existingTokens = $(this).tokenfield('getTokens');
  $.each(existingTokens, function(index, token) {
    if (token.value === event.attrs.value) {
      event.preventDefault();
    }
  });
});

我已经为Bootstrap的Typeahead中的建议定义了一个自定义模板,如下所述.但是当我选择任何建议时,我只 输入国家名称.因为我已经在displayKey参数中传递了国家/地区.无论如何我可以在输入中选择国家和城市名称(与模板中的相同)？

这是JsFiddle:http://jsfiddle.net/geekowls/agrg3xhj/

我还阅读了Typeahead网站上的示例.但没有找到任何相关的东西.我所知道的是displayKey参数可以取一个函数.

$(document).ready(function () {

                        var dataSource = new Bloodhound({
                            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('country', 'city'),
                            queryTokenizer: Bloodhound.tokenizers.whitespace,
                            identify: function (obj) { return obj.country; },
                            prefetch: "../Data/1.json"

                        });

                        function dataSourceS(q, sync) {
                                dataSource.search(q, sync);          
                        }

                        $('.typeahead').typeahead( {
                            minLength: 0,
                            highlight: true
                        }, {
                            name: 'countries',
                            displayKey: 'country',
                            source: dataSourceS,
                            templates: {
                                empty: [
                                    '<div class="empty">No Matches Found</div>'
                                ].join('\n'),
                                suggestion: function (data){
                                    return '<div>' + …

默认情况下,bloodhound.js将通过HTTP GET进行查询,但这使您容易受到JSON劫持.由于我有敏感信息要加载到typeahead,因此HTTP GET使我容易受到攻击.曾经有一个选择帖子的选项(如下所示:typeahead.js remote beforesend post data issue),但这不适用于最新版本(v.0.11.1).

希望这不是重复:为什么bloodhound.get()返回undefined？

我升级到typeahead.js版本0.10.0.以前的版本正确地返回了建议.现在我收到undefined以下代码的回复:

// instantiate the bloodhound suggestion engine
var engine = new Bloodhound({
    datumTokenizer: function (d) { return [d]; },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: ["(A)labama", "Alaska", "Arizona", "Arkansas"]
});

// initialize the bloodhound suggestion engine
engine.initialize();

$('#typeahead').typeahead(null, {
        source: engine.ttAdapter()
    });

这是我的小提琴:http://jsfiddle.net/ucUcn/6/

任何想法为什么会这样？

我正试图让Twitter Typeahead + Bloodhound与Google的CSE合作.

到目前为止,我已经设法返回结果,但我无法计算出datumTokenizer.

var results = new Bloodhound({
  datumTokenizer: function(data) {
   return Bloodhound.tokenizers.whitespace(d.value)
  },
  queryTokenizer: Bloodhound.tokenizers.obj.whitespace,
  remote: {
    url: "http://clients1.google.com/complete/search?client=partner&hl=en&sugexp=gsnos%2Cn%3D13&gs_rn=25&gs_ri=partner&partnerid=004914516364918182382%3Ayfqw09r4qvu&types=t&ds=cse&cp=3&gs_id=15&q=%QUERY&callback=showResults&duffCallback=?",
    ajax: $.ajax({type:'GET',dataType:'jsonp',jsonp:'duffCallback'}),
    filter: showResults
  }
});

看小提琴:http://jsfiddle.net/thugsb/3KAjh/

你会看到我将showResults()作为一个数组返回结果.但是,从中调用showResults()filter:似乎没有做任何事情,因为删除该行没有任何效果.所以我不太确定发生了什么.

请注意,duffCallback是我在阅读这个问题时要做的.如果有更好的方法来完成这项工作,我会全都耳朵!

我正在使用Typeahead设置表单.我有两个输入字段彼此相邻,我需要在每个字段上自动完成.我的HTML看起来像这样:

<select id="numerator">
    <option value="presentation">presentation</option>
    <option value="chemical">chemical</option>
</select>
<input id="numeratorId" class="typeahead" type="text" />
<br/>
<select id="denominator">
    <option value="presentation">presentation</option>
    <option value="chemical">chemical</option>
</select>
<input id="denominatorId" class="typeahead" type="text" />

input通过查看API端点,每个字段都将自动完成.这应该是形式/api/1.0/code?type=presentation&code=123或/api/1.0/code?type=chemical&code=123.

所述的值type在API调用参数应取决于的值<select>元件旁边的每个输入字段.

我遇到的问题是我不知道如何告诉Bloodhound type参数应该是什么.

理想情况下,我想将它传递给Bloodhound,但我不知道该怎么做.这是我的JavaScript:

var bnfMatches = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
      url: '/api/1.0/code?',
      replace: function(url, uriEncodedQuery) {
        url = url + 'code=' + uriEncodedQuery;
        // How to change this to denominator for denominator queries?
        val = $('#numerator').val(); 
        if (!val) …

我正在使用Bloodhound和远程API,我需要转换从远程API返回的结果.

API网址为https://www.googleapis.com/books/v1/volumes?q=quilting,它返回一个具有items列表属性的对象.我需要将该列表返回给Typeahead,而不是顶级对象.

Bloodhound文档说有一个transform功能应该这样做,但我无法让它工作.

这是我的代码:

var books = new Bloodhound({
  datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.num); },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    url: 'https://www.googleapis.com/books/v1/volumes?q=quilting'
  },
  transform: function(response) {
    console.log('transform', response);
    return response.items;
  }
});
books.initialize();

// instantiate the typeahead UI
$('#myTextBox').typeahead(null, {
  displayKey: function(suggestion) {
    console.log('suggestion', suggestion);
    return suggestion.volumeInfo.title + suggestion.volumeInfo.publishedDate;
  },
  source: numbers.ttAdapter()
});

这里有一个JSFIddle:http://jsfiddle.net/2Cres/46/

这不起作用,因为我需要将items列表提供给typeahead UI,但这似乎并没有发生.

我的Typeahead.js/Bloodhound(0.11.1)没有按预期工作.在提供的json结果列表中,只有一些显示为建议.

例如,如果我输入los我的字段,那么只有Lostorf4个可选项显示时,我才会得到其他内容.

这是我的代码:

HTML

<div id="remote">
<input class="typeahead" type="text">
</div>

JS

var searchablePlaces    = new Bloodhound({
    datumTokenizer      : Bloodhound.tokenizers.obj.whitespace("term"),
    queryTokenizer      : Bloodhound.tokenizers.whitespace,
    remote              : {
        url             : 'http://www.example.com/autocomplete/%QUERY/',
        wildcard        : '%QUERY',
        filter          : function(response) { return response.data.results; }
      },
    limit               : 10
});

searchablePlaces.initialize();

$('#remote .typeahead').typeahead(
{
    hint            : true,
    highlight       : true,
    minLength       : 2
},
{
    name            : 'searchable-places',
    displayKey      : "term",
    source          : searchablePlaces.ttAdapter()
})

JSON

{
    "data": {
        "query": "los", …

我想在我的血腥请求中添加一个自定义标题,这是我的代码,但它不起作用.

var datasource = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: url,
        prepare: function (query, settings) {
            var authHeaders;
            settings.type = "POST";
            settings.data = param + '=' + query;
            settings.headers = {
                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            };


            return settings;
        },
        wildcard: '%QUERY'
    }
});

任何的想法？

我有一个问题,当用户联合会话到期时,Typeahead会停止工作.我希望能够在Typeahead的"远程"调用失败时执行操作.具体如何处理Typeahead？在典型的ajax调用中是否会出现某种类似"错误"的回调？这是我目前的代码:

var hints = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: "/ProjectAssociation/CountryLookup?query=%QUERY",
        wildcard: "%QUERY"
    }
});
$("#assocStoragesSelection").typeahead(null, {
    name: "nations",
    limit: 90,
    valueKey: "ShortCode",
    displayKey: "Name",
    source: hints,
    templates: {
        empty: [
            "<div class='noitems'>",
            "No Items Found",
            "</div>"
        ].join("\n")
    }
});