The multiple-datasource typeahead plugin for Twitter Bootstrap.
29 | 30 | 31 | 32 | 33 |Sorry, not a live example. But it works, trust us.
51 |
52 | $('input[name="ofYourChoice"]').multisuggest({
53 | sources: [
54 | {
55 | data: "/api/users",
56 | queryParam: "text",
57 | type: "url",
58 | listFormatter: function(item, term) {
59 | var compiled = _.template("<% if (thumb) { print('<img src="../' + thumb + '">') } %><% print(hl(name.first)) %> <% print(hl(name.last)) %><% if (name.suffix) { print(', ' + name.suffix)} %><br /><small><% print(hl(organization.name)) %></small>");
60 | return compiled({
61 | hl: $.proxy($.fn.usersuggest.highlighter, this, term),
62 | organization: item.profile.organization,
63 | name: item.profile.name,
64 | thumb: item.profile.thumbnail
65 | });
66 | },
67 | inputFormatter: function(item) {
68 | var compiled = _.template("<%= first %> <%= last %>");
69 | return compiled(item.profile.name);
70 | },
71 | valueAttribute: function(item) {
72 | return item.profile.id;
73 | },
74 | resultsProcessor: function(data) {
75 | return data.users;
76 | },
77 | header: "Users",
78 | maxEntries: 5
79 | }
80 | ],
81 | link: '<a tabFocus="0" href="#">Invite a new user</a>',
82 | linkHandler: function() {
83 | // show invitation form
84 | },
85 | loadingIconClass: "usuggest-loading",
86 | noResultsText: "No matching users.",
87 | enableDropdownMode: true,
88 | delay: 300,
89 | minLength: 2
90 | });
91 |
92 |
93 |