Question

是否可以更改Twitter返回的Typeahead？

这样用户可以在文本字段中搜索名称，但是它会返回与所选结果相对应的ID吗？

我无法找到任何相关内容，我甚至搜索了源代码。

提前致谢

$(document).ready(function(){
    var modules = getBloodhound('modules');

    $('.typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    },
    {
        name: 'id',
        displayKey: 'name',
        source: modules
    });
});

var getBloodhound = function(name){
    return new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.whitespace,
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            url: '/json/' + name + '/%QUERY',
            wildcard: '%QUERY'
        }
    });
}

Answer 1

修改，更新

如果正确解释Question，则返回的数组包含具有name和id属性的对象。要求是将hint元素显示的input设置为返回对象的id，而不是name，这将在建议结果中呈现？

您可以使用templates，suggestion功能设置.tt-hint input，其中显示hint至id的值;设置.tt-hint placeholder属性，在hint选项中显示对象参数的id到suggestion。

如果没有{{1>，请使用typeahead:render，input个事件设置css的{{1}} left属性，或.tt-hint清空字符串在placeholder

value

.typeahead

var getBloodhound = function(name){
      return new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.whitespace("value"),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            url: '/json/' + name + '/%QUERY',
            wildcard: '%QUERY'
        }
      });
}

var modules = getBloodhound('modules').ttAdapter();

$(".typeahead").typeahead({
    hint: true,
    minLength: 1,
    highlight: true
  }, {
    name: "id",
    display: "value",
    source: modules,
    templates: {
      suggestion: function(data) {
        return "<li>" + data.team + "</li>"
      }
    }
  })
  .on("typeahead:render", function(e, data) {
    console.log(e, data);
    $(".tt-hint").attr("placeholder", data.id)
    .css("left", e.target.value.length * 10)
  })
  .on("input", function() {
    if (this.value === "" || /^\s+$/.test(this.value)) {
      $(".tt-hint").attr("placeholder", "")
    }
  })

更改Twitter Typeahead返回的内容

1 个答案: