Ich erweiterte die Bootstrap-Typahead, um ein Objekt anstelle einer Zeichenfolge zu nehmen.
Es funktioniert, aber ich würde gerne wissen, das ist der richtige Weg, um die Dinge zu tun.Erweitern Sie die Bootstrap-TypeAhead, um ein Objekt anstelle einer Zeichenfolge zu nehmen
Danke.
Referenz:
http://twitter.github.com/bootstrap/javascript.html#typeahead http://twitter.github.com/bootstrap/assets/js/bootstrap-typeahead.js
_.extend($.fn.typeahead.Constructor.prototype, {
render: function (items) {
var that = this;
items = $(items).map(function (i, item) {
i = $(that.options.item)
.attr('data-value', item[that.options.display])
.attr('data-id', item.id);
i.find('a').html(that.highlighter(item));
return i[0];
});
items.first().addClass('active');
this.$menu.html(items);
return this;
},
select: function() {
var val = this.$menu.find('.active').attr('data-value'),
id = this.$menu.find('.active').attr('data-id');
this.$element
.val(this.updater(val, id))
.change();
return this.hide()
}
});
return function (element, options) {
var getSource = function() {
return {
id: 2,
full_name: 'first_name last_name'
};
};
element.typeahead({
minLength: 3,
source: getSource,
display: 'full_name',
sorter: function (items) {
var beginswith = [],
caseSensitive = [],
caseInsensitive = [],
item,
itemDisplayed;
while (item = items.shift()) {
itemDisplayed = item[this.options.display];
if (!itemDisplayed.toLowerCase().indexOf(this.query.toLowerCase())) {
beginswith.push(item);
} else if (~itemDisplayed.indexOf(this.query)) {
caseSensitive.push(item);
} else {
caseInsensitive.push(item);
}
}
return beginswith.concat(caseSensitive, caseInsensitive);
},
highlighter: function (item) {
var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&');
return item[this.options.display].replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
return '<strong>' + match + '</strong>';
});
},
matcher: function (item) {
var value = item[this.options.display];
return {
value: ~value.toLowerCase().indexOf(this.query.toLowerCase()),
id: item.id
};
},
updater: function (item, userId) {
options.hiddenInputElement.val(userId);
return item;
}
});
};
ich sehe nicht, wie sind Sie sogar so weit zu bekommen. Wenn ich versuche, Ihren Code auszuführen, wird eine Ausnahme in der 'sort()' - Methode ausgelöst, um zu versuchen, String-Methoden auf Objekte anzuwenden. Änderst du diese Methode? Oder vielleicht Funktionen zu den Objekten hinzufügen? – merv
Ja, du hast Recht, weil ich andere Änderungen vorgenommen habe, die ich noch nicht gepostet habe. Ich werde es später machen. danke –
Ja, das wäre hilfreich, da 'matcher()' und 'sorter()' beide 'Elemente' ändern, bevor sie an die' render() 'Methode übergeben werden. Außerdem wird das Überschreiben von 'sorter()' in der API unterstützt, daher sollte es nicht notwendig sein, das in der ** bootstrap-typeahead.js ** - Quelle zu bearbeiten. (nicht zu sagen, dass Sie das getan haben - nur darauf hinweisend) – merv