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

14
demo/demo.css Normal file
View File

@@ -0,0 +1,14 @@
/* @group Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}.clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}.clearfix:after {clear: both;content: ' ';display: block;font-size: 0;line-height: 0;visibility: hidden;width: 0;height: 0;}* html .clearfix {height: 1%;}
/* @end */
input {
border: 1px solid #999;
}
#container {
width: 960px;
margin: 0px auto;
}

60
demo/demo.html Normal file
View File

@@ -0,0 +1,60 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>examples</title>
<link rel="stylesheet" href="demo.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="../javascripts/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../suggest_results/jquery.suggest_results.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../suggest_results/jquery.suggest_results.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var data = [
{title: "head", href: "/head", match: "head zzz"},
{title: "headache", href: "/headache", match: "headache zzz"},
{title: "health", href: "/health", match: "health zzz"},
{title: "healthcare", href: "/healthcare", match: "healthcare zzz"},
{title: "healthier", href: "/healthier", match: "healthier zzz"},
{title: "heck", href: "/heck", match: "heck zzz"},
{title: "hectic", href: "/hectic", match: "hectic zzz"},
{title: "held", href: "/held", match: "held zzz"},
{title: "hell", href: "/hell", match: "hell zzz"},
];
$("input").suggest_results({
data: data
});
});
</script>
</head>
<body>
<div id="container">
<br />
<br />
<input type="text" name="example1" value="" id="example1" />
<br />
<br />
<input type="text" name="example2" value="" id="example2" />
<br />
<br />
<input type="text" name="example3" value="" id="example3" />
</div>
</body>
</html>

11
demo/demo.json Normal file
View File

@@ -0,0 +1,11 @@
[
{title: "head", href: "/head", match: "head zzz"},
{title: "headache", href: "/headache", match: "headache zzz"},
{title: "health", href: "/health", match: "health zzz"},
{title: "healthcare", href: "/healthcare", match: "healthcare zzz"},
{title: "healthier", href: "/healthier", match: "healthier zzz"},
{title: "heck", href: "/heck", match: "heck zzz"},
{title: "hectic", href: "/hectic", match: "hectic zzz"},
{title: "held", href: "/held", match: "held zzz"},
{title: "hell", href: "/hell", match: "hell zzz"},
];

6
example.json
View File

@@ -1,6 +0,0 @@
[
{title: "hello", url: "/hello", match: "hello dude"},
{title: "world", url: "/world", match: "world dude"},
{title: "foo", url: "/foo", match: "foo dude"},
{title: "bar", url: "/bar", match: "bar dude"}
];

53
examples.html
View File

@@ -1,53 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>examples</title>
<script src="javascripts/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="suggest_results/jquery.suggest_results.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="suggest_results/jquery.suggest_results.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var data = [
{title: "hello", url: "/hello", match: "hello hey"},
{title: "world", url: "/world", match: "world hey"},
{title: "foo", url: "/foo", match: "foo hex"},
{title: "bar", url: "/bar", match: "bar hex"}
];
$("input").suggest_results({data: data});
// $(document).keyup(function(e){
// console.log(e.keyCode);
// })
});
</script>
</head>
<body>
<br />
<br />
<input type="text" name="example1" value="" id="example1" />
<br />
<br />
<input type="text" name="example2" value="" id="example2" />
<br />
<br />
<input type="text" name="example3" value="" id="example3" />
</body>
</html>

30
suggest_results/jquery.suggest_results.css
View File

@@ -1,7 +1,33 @@
#suggest_results { #suggest_results {
background: #eee; background: #fbfbfb;
border: 1px solid #ccc;
border-top: none;
display: none; display: none;
position: absolute; position: absolute;
z-index: 1000; 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); self.init($options);
var TAB = 9;
var RETURN = 13;
var ESC = 27;
var ARRUP = 38;
var ARRDN = 40;
return this.each(function(){ return this.each(function(){
var $e = $(this); var $e = $(this);
$e.focus(function(){ $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(){ }).blur(function(){
self.hide(); self.hide();
}).keyup(function(e){ }).keyup(function(e){
var TAB = 9;
var RETURN = 13;
var ESC = 27;
var ARRUP = 38;
var ARRDN = 40;
switch(e.keyCode) { switch(e.keyCode) {
case ARRUP: case ARRUP: self.select_prev($options); return false;
case ARRDN: case ARRDN: self.select_next($options); return false;
case ESC: self.clear($e, $options); case ESC: self.clear($e, $options); break;
case RETURN: case RETURN: self.activate_selected($options); return false;
default: self.search($e, $options); default:
self.clearTimeout();
self.search($e, $options);
} }
}); });
}); });
@@ -32,7 +38,8 @@
$.fn.suggest_results.box = null; $.fn.suggest_results.box = null;
$.fn.suggest_results.attached_to = null; $.fn.suggest_results.attached_to = null;
$.fn.suggest_results.current_results = []; $.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){ $.fn.suggest_results.init = function(options){
var self = $.fn.suggest_results; var self = $.fn.suggest_results;
@@ -45,14 +52,21 @@
$.fn.suggest_results.search = function(elm, options){ $.fn.suggest_results.search = function(elm, options){
var self = $.fn.suggest_results; 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 !== "") { if (typeof(options.url) === "string" && options.url !== "") {
//TODO support fetching results from server-side //TODO support fetching results from server-side
} else { } 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){ $.fn.suggest_results.clear = function(elm, options){
@@ -66,11 +80,16 @@
var results_length = results.length; var results_length = results.length;
var html = ""; var html = "";
for (var i=0; i < results_length; i++) { 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.html("");
self.box.append(html); self.box.append(html);
$(".result", self.box).click(function(){
self.redirect_to($("a", $(this)).attr("href"));
});
}; };
$.fn.suggest_results.attach = function(elm, options){ $.fn.suggest_results.attach = function(elm, options){
@@ -78,18 +97,25 @@
var elm_uid = self.elm_uid(elm); var elm_uid = self.elm_uid(elm);
if (elm_uid !== self.attached_to) { if (elm_uid !== self.attached_to) {
var offset = elm.offset(); var offset = elm.offset();
var width = elm.innerWidth(); // left offset
width += parseInt(elm.css("border-left-width"), 10) + parseInt(elm.css("border-right-width"), 10);
self.box.css("width", width + "px");
self.box.css("left", offset.left + "px"); self.box.css("left", offset.left + "px");
// top offset
var top = offset.top + elm.innerHeight(); 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); top += parseInt(elm.css("border-top-width"), 10) + parseInt(elm.css("border-bottom-width"), 10);
self.box.css("top", top + "px"); 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; self.attached_to = elm_uid;
}; };
}; };
@@ -99,32 +125,79 @@
}; };
$.fn.suggest_results.hide = function(){ $.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){ $.fn.suggest_results.select_next = function(options){
if (typeof(terms) === "string") { var self = $.fn.suggest_results;
terms = [terms]; 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 matched = "";
var result = []; var results = [];
for (var i = terms.length - 1; i >= 0; i--){ for (var i = terms.length - 1; i >= 0; i--){
var term = terms[i]; var term = terms[i];
term = term.toLowerCase(); term = term.toLowerCase();
if (data !== null && typeof(term) !== "undefined" && term !== "") { if (data !== null && typeof(term) !== "undefined" && term !== "") {
for (var i = data.length - 1; i >= 0; i--){ var data_length = data.length;
var title = data[i].title.toLowerCase(); for (var n=0; n < data_length; n++) {
var match = (typeof(data[i].match) !== "undefined") ? data[i].match.toLowerCase() : "" ; 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 (title.indexOf(term) !== -1 || match.indexOf(term) !== -1) {
if (matched.indexOf(":" + i + ":") == -1) { if (matched.indexOf(":" + n + ":") == -1) {
result.push(data[i]); results.push(data[n]);
matched += ":" + i + ":"; matched += ":" + n + ":";
if (results.length >= options.limit) {
return results;
};
}; };
}; };
}; };
}; };
}; };
return result; return results;
}; };
$.fn.suggest_results.elm_uid = function(elm){ $.fn.suggest_results.elm_uid = function(elm){
@@ -144,14 +217,48 @@
return string; 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 = { $.fn.suggest_results.defaults = {
delay: 150,
limit: 6,
data: null, data: null,
exact_match: false, exact_match: true,
template: { template: {
container_id: "suggest_results", container_id: "suggest_results",
container: '<div id="{{id}}"></div>', container: '<ol id="{{id}}"></ol>',
result: '<a class="result" id="{{id}}" href="{{url}}"><span class="title">{{title}}</span></a>', result: '<li class="result {{class}}" id="{{id}}"><a href="{{href}}"><span class="title">{{title}}</span></a></li>',
category: '<strong class="category">{{category}}</strong>' //TODO add support for categories category: '<strong class="category {{class}}">{{category}}</strong>' //TODO add support for categories
} }
}; };