jimeh/fancy_input
1
0
Fork 0
mirror of https://github.com/jimeh/fancy_input.git synced 2026-02-19 11:36:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

things are closer to done

Browse Source
This commit is contained in:
Jim Myhrberg
2010-03-10 00:57:58 +02:00
parent e61fee1fb2
commit f27c7c3f57
7 changed files with 262 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
suggest_results/jquery.suggest_results.css
View File

@@ -1,7 +1,33 @@
#suggest_results {
background: #eee;
background: #fbfbfb;
border: 1px solid #ccc;
border-top: none;
display: none;
position: absolute;
z-index: 1000;
}
margin: 0px;
padding: 0px;
}
#suggest_results li {
margin: 0px;
border-bottom: 1px solid #ddd;
}
#suggest_results li.first {
}
#suggest_results li.last {
border-bottom: none;
}
#suggest_results li.result {
display: block;
}
#suggest_results li.result a {
display: block;
padding: 3px 5px;
}
#suggest_results li.result a:hover,
#suggest_results li.result.selected a {
background: #3464C9;
color: #fff;
}

191
suggest_results/jquery.suggest_results.js
View File

@@ -5,25 +5,31 @@
self.init($options);
var TAB = 9;
var RETURN = 13;
var ESC = 27;
var ARRUP = 38;
var ARRDN = 40;
return this.each(function(){
var $e = $(this);
$e.focus(function(){
self.attach($e);
self.attach($e, options);
if ($e.val().length > 0) {
self.search_timeout = self.setTimeout(function(){
self.search($e, $options);
}, $options.delay);
};
}).blur(function(){
self.hide();
}).keyup(function(e){
var TAB = 9;
var RETURN = 13;
var ESC = 27;
var ARRUP = 38;
var ARRDN = 40;
switch(e.keyCode) {
case ARRUP:
case ARRDN:
case ESC: self.clear($e, $options);
case RETURN:
default: self.search($e, $options);
case ARRUP: self.select_prev($options); return false;
case ARRDN: self.select_next($options); return false;
case ESC: self.clear($e, $options); break;
case RETURN: self.activate_selected($options); return false;
default:
self.clearTimeout();
self.search($e, $options);
}
});
});
@@ -32,7 +38,8 @@
$.fn.suggest_results.box = null;
$.fn.suggest_results.attached_to = null;
$.fn.suggest_results.current_results = [];
$.fn.suggest_results.selected_result = [];
$.fn.suggest_results.selected_result = null;
$.fn.suggest_results.timeout = null;
$.fn.suggest_results.init = function(options){
var self = $.fn.suggest_results;
@@ -45,14 +52,21 @@
$.fn.suggest_results.search = function(elm, options){
var self = $.fn.suggest_results;
var terms = (options.exact_match) ? elm.val() : elm.val().split(/\s/);
var terms = (options.exact_match) ? $.trim(elm.val()) : elm.val().split(/\s/);
if (typeof(options.url) === "string" && options.url !== "") {
//TODO support fetching results from server-side
} else {
var results = self.filter_data(terms, options.data);
console.log(options.data);
var results = self.filter_data(terms, options.data, options);
console.log(results);
};
self.current_results = results;
if (results.length > 0) {
self.render(results, options);
self.show();
} else {
self.hide();
};
self.render(results, options);
self.show();
};
$.fn.suggest_results.clear = function(elm, options){
@@ -66,11 +80,16 @@
var results_length = results.length;
var html = "";
for (var i=0; i < results_length; i++) {
html += self.mustache(options.template.result, $.extend({}, {id: "suggest_result_" + i}, results[i]));
var meta = {id: "suggested_result_" + i, "class": ""};
if (i == 0) { $.extend(meta, {"class": "first"}); };
if (i == results_length - 1) { $.extend(meta, {"class": "last"}); };
html += self.mustache(options.template.result, $.extend({}, meta, results[i]));
};
self.box.html("");
self.box.append(html);
$(".result", self.box).click(function(){
self.redirect_to($("a", $(this)).attr("href"));
});
};
$.fn.suggest_results.attach = function(elm, options){
@@ -78,18 +97,25 @@
var elm_uid = self.elm_uid(elm);
if (elm_uid !== self.attached_to) {
var offset = elm.offset();
var width = elm.innerWidth();
width += parseInt(elm.css("border-left-width"), 10) + parseInt(elm.css("border-right-width"), 10);
self.box.css("width", width + "px");
// left offset
self.box.css("left", offset.left + "px");
// top offset
var top = offset.top + elm.innerHeight();
top += parseInt(elm.css("margin-top"), 10);
top += parseInt(elm.css("border-top-width"), 10) + parseInt(elm.css("border-bottom-width"), 10);
self.box.css("top", top + "px");
// width
if (typeof(options.width) === "number" || (typeof(options.width) === "string" && options.width != "")) {
self.box.css("width", options.width);
} else {
var width = elm.innerWidth();
width += parseInt(elm.css("border-left-width"), 10) + parseInt(elm.css("border-right-width"), 10);
width -= parseInt(self.box.css("border-left-width"), 10) + parseInt(self.box.css("border-right-width"), 10);
self.box.css("width", width + "px");
};
self.attached_to = elm_uid;
};
};
@@ -99,32 +125,79 @@
};
$.fn.suggest_results.hide = function(){
$.fn.suggest_results.box.hide();
var self = $.fn.suggest_results;
self.setTimeout(function(){
self.selected_result = null;
self.box.hide();
}, 500);
};
$.fn.suggest_results.filter_data = function(terms, data){
if (typeof(terms) === "string") {
terms = [terms];
$.fn.suggest_results.select_next = function(options){
var self = $.fn.suggest_results;
var limit = self.current_results.length;
console.log(limit);
if (limit > 0) {
if (self.selected_result === null) {
self.selected_result = 0;
$("#suggested_result_" + self.selected_result, self.box).addClass("selected");
} else if (self.selected_result + 1 < limit) {
$(".selected", self.box).removeClass("selected");
self.selected_result++;
$("#suggested_result_" + self.selected_result, self.box).addClass("selected");
};
};
return false;
};
$.fn.suggest_results.select_prev = function(options){
var self = $.fn.suggest_results;
var limit = self.current_results.length;
console.log(limit);
if (limit > 0) {
if (self.selected_result === null) {
self.selected_result = limit - 1;
$("#suggested_result_" + self.selected_result, self.box).addClass("selected");
} else if (self.selected_result > 0) {
$(".selected", self.box).removeClass("selected");
self.selected_result--;
$("#suggested_result_" + self.selected_result, self.box).addClass("selected");
};
};
return false;
};
$.fn.suggest_results.activate_selected = function(options){
var self = $.fn.suggest_results;
if (self.selected_result !== null) {
self.redirect_to(self.current_results[self.selected_result].href);
};
};
$.fn.suggest_results.filter_data = function(terms, data, options){
if (typeof(terms) === "string") { terms = [terms]; };
var matched = "";
var result = [];
var results = [];
for (var i = terms.length - 1; i >= 0; i--){
var term = terms[i];
term = term.toLowerCase();
if (data !== null && typeof(term) !== "undefined" && term !== "") {
for (var i = data.length - 1; i >= 0; i--){
var title = data[i].title.toLowerCase();
var match = (typeof(data[i].match) !== "undefined") ? data[i].match.toLowerCase() : "" ;
var data_length = data.length;
for (var n=0; n < data_length; n++) {
var title = data[n].title.toLowerCase();
var match = (typeof(data[n].match) !== "undefined") ? data[n].match.toLowerCase() : "" ;
if (title.indexOf(term) !== -1 || match.indexOf(term) !== -1) {
if (matched.indexOf(":" + i + ":") == -1) {
result.push(data[i]);
matched += ":" + i + ":";
if (matched.indexOf(":" + n + ":") == -1) {
results.push(data[n]);
matched += ":" + n + ":";
if (results.length >= options.limit) {
return results;
};
};
};
};
};
};
return result;
return results;
};
$.fn.suggest_results.elm_uid = function(elm){
@@ -144,14 +217,48 @@
return string;
};
$.fn.suggest_results.redirect_to = function(url, location){
if (typeof(location) == "undefined") {
location = window.location;
};
var redirect_to = "";
if (url.match(/.+\:\/\/.+/) === null) {
redirect_to += location.protocol + "//";
redirect_to += location.hostname;
if (location.port != "") { redirect_to += ":" + location.port; };
if (url.charAt(0) !== "/") {
redirect_to += location.pathname.substr(0, location.pathname.lastIndexOf("/")+1);
};
window.location.href = redirect_to + url;
} else {
window.location.href = url;
};
};
$.fn.suggest_results.setTimeout = function(callback, delay){
var self = $.fn.suggest_results;
self.clearTimeout();
self.timeout = setTimeout(callback, delay);
};
$.fn.suggest_results.clearTimeout = function(){
var self = $.fn.suggest_results;
if (self.timeout !== null) {
clearTimeout(self.timeout);
self.timeout = null;
};
};
$.fn.suggest_results.defaults = {
delay: 150,
limit: 6,
data: null,
exact_match: false,
exact_match: true,
template: {
container_id: "suggest_results",
container: '<div id="{{id}}"></div>',
result: '<a class="result" id="{{id}}" href="{{url}}"><span class="title">{{title}}</span></a>',
category: '<strong class="category">{{category}}</strong>' //TODO add support for categories
container: '<ol id="{{id}}"></ol>',
result: '<li class="result {{class}}" id="{{id}}"><a href="{{href}}"><span class="title">{{title}}</span></a></li>',
category: '<strong class="category {{class}}">{{category}}</strong>' //TODO add support for categories
}
};