更改 Twitter Typeahead 返回的内容

Question

Is it possible to change what Typeahead from Twitter returns?

So that users can search the name in the textfield, but it returns the ID that corresponds to the selected result?

I haven't been able to find anything about this, I even searched the source code.

Thanks in advance

$(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

Edit, Updated

If interpret Question correctly, the returned array contains objects which have name and id properties. Requirement is to set the hint displayed at input element to id of returned object, not name , which would be rendered in suggestion results?

You can use templates , suggestion function to set .tt-hint input , which displays hint to id of value; set .tt-hint placeholder attribute, which displays hint to id of object argument at suggestion option.

Use typeahead:render , input events to set css left property of .tt-hint , or placeholder to empty string if no value at .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", "")
    }
  })

 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>