Personalize Most Frequently Used
by abhitalks
HTML
<form>
<select id="drop1">
<option value="a">Red</option>
<option value="b">Green</option>
<option value="c">Blue</option>
<option value="d">White</option>
<option value="e">Black</option>
</select>
<select id="drop2">
<option value="1">Square</option>
<option value="2">Circle</option>
<option value="3">Ellipse</option>
<option value="4">Rectangle</option>
<option value="5">Other</option>
</select>
</form>
JavaScript
(function ($) {
$.fn.extend({
mfu: function () {
var self = this, cookieName = 'mfu',
defaultExpiry = new Date(2050, 1, 1),
getCookie = function(name) {
var results = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
return results ? unescape(results[2]) : null;
},
setCookie = function(name, value) {
var cookieString = name + "=" + escape(JSON.stringify(value));
cookieString += "; expires=" + defaultExpiry.toGMTString();
document.cookie = cookieString;
},
mfuStored = getCookie(cookieName),
mfuList = JSON.parse(mfuStored)
;
return self.each(function () {
var select = this, mfu;
if (! mfuList) { mfuList = []; }
mfu = mfuList.filter(function(o) {
return o.id === select.id;
})[0];
if (!mfu) {
mfuList.push({ 'id': select.id, 'mfu': [] });
mfu = mfuList[mfuList.length - 1].mfu;
} else {
mfu = mfu.mfu;
}
[].map.call(select.options, function(option) {
var opt = mfu.filter(function(o) {
return o.value === option.value;
})[0];
if (! opt) {
opt = {} ;
opt.value = option.value;
opt.caption = option.innerText;
opt.frequency = 0;
mfu.push(opt);
}
});
mfu.sort(function(a, b) { return a.frequency < b.frequency });
$(select).empty();
mfu.forEach(function(item) {
...