更改 Twitter Typeahead 返回的内容

Change what Twitter Typeahead returns

本文关键字：返回 Twitter Typeahead 更改      更新时间：2023-09-26

是否可以更改 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'
        }
    });
}

编辑，更新

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

可以使用templates 、suggestion函数来设置 .tt-hint input ，这将显示hint到id的值;设置.tt-hint placeholder属性，该属性在选项suggestion显示对象参数的hint到id。

使用 typeahead:render 、input 事件来设置 .tt-hint 的属性css left或者如果 .typeahead 处没有value，则placeholder为空字符串 

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", "")
    }
  })


var nflTeams = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace("team"),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  local: [{
    "team": "San Francisco 49ers",
    "id": "49ers"
  }, {
    "team": "Chicago Bears",
    "id": "Bears"
  }, {
    "team": "Cincinnati Bengals",
    "id": "Bengals"
  }, {
    "team": "Buffalo Bills",
    "id": "Bills"
  }, {
    "team": "Denver Broncos",
    "id": "Broncos"
  }, {
    "team": "Cleveland Browns",
    "id": "Browns"
  }, {
    "team": "Tampa Bay Buccaneers",
    "id": "Buccaneers"
  }, {
    "team": "Arizona Cardinals",
    "id": "Cardinals"
  }, {
    "team": "San Diego Chargers",
    "id": "Chargers"
  }, {
    "team": "Kansas City Chiefs",
    "id": "Chiefs"
  }, {
    "team": "Indianapolis Colts",
    "id": "Colts"
  }, {
    "team": "Dallas Cowboys",
    "id": "Cowboys"
  }, {
    "team": "Miami Dolphins",
    "id": "Dolphins"
  }, {
    "team": "Philadelphia Eagles",
    "id": "Eagles"
  }, {
    "team": "Atlanta Falcons",
    "id": "Falcons"
  }, {
    "team": "New York Giants",
    "id": "Giants"
  }, {
    "team": "Jacksonville Jaguars",
    "id": "Jaguars"
  }, {
    "team": "New York Jets",
    "id": "Jets"
  }, {
    "team": "Detroit Lions",
    "id": "Lions"
  }, {
    "team": "Green Bay Packers",
    "id": "Packers"
  }, {
    "team": "Carolina Panthers",
    "id": "Panthers"
  }, {
    "team": "New England Patriots",
    "id": "Patriots"
  }, {
    "team": "Oakland Raiders",
    "id": "Raiders"
  }, {
    "team": "St.Louis Rams",
    "id": "Rams"
  }, {
    "team": "Baltimore Ravens",
    "id": "Ravens"
  }, {
    "team": "Washington Redskins",
    "id": "Redskins"
  }, {
    "team": "New Orlean Saints",
    "id": "Saints"
  }, {
    "team": "Seattle Seahawks",
    "id": "Seahawks"
  }, {
    "team": "Pittsburgh Steelers",
    "id": "Steelers"
  }, {
    "team": "Houston Texans",
    "id": "Texans"
  }, {
    "team": "Tennesse Titans",
    "id": "Titans"
  }, {
    "team": "Minnesota Vikings",
    "id": "Vikings"
  }]
})
var adapter = nflTeams.ttAdapter();
$("#default-suggestions .typeahead").typeahead({
    hint: true,
    minLength: 1,
    highlight: true
  }, {
    name: "nfl-teams",
    display: "value",
    source: adapter,
    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", "calc(" + e.target.value.length * 7 + "px)")
  })
  .on("input", function() {
    if (this.value === "" || /^'s+$/.test(this.value)) {
      $(".tt-hint").attr("placeholder", "")
    }
  })
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
<div id="default-suggestions">
  <input class="typeahead" type="text" placeholder="NFL Teams">
</div>

相关文章：