From 42d79e670bb8dade91397efdf5d6bc4bdff7c320 Mon Sep 17 00:00:00 2001 From: Jim Myhrberg Date: Tue, 18 May 2010 02:13:21 +0300 Subject: [PATCH 1/8] Renamed project to Fancy Input. * Major restructuring of the plugin objects for easier extending. * Bumped version to v0.2.0. --- demo/{index.html => fancy_suggest.html} | 24 +- fancy_input/jquery.fancy_input.js | 126 ++++++ .../jquery.fancy_suggest.css | 28 +- fancy_input/jquery.fancy_suggest.js | 326 +++++++++++++++ suggest_results/jquery.suggest_results.js | 386 ------------------ 5 files changed, 481 insertions(+), 409 deletions(-) rename demo/{index.html => fancy_suggest.html} (73%) create mode 100644 fancy_input/jquery.fancy_input.js rename suggest_results/jquery.suggest_results.css => fancy_input/jquery.fancy_suggest.css (53%) create mode 100644 fancy_input/jquery.fancy_suggest.js delete mode 100644 suggest_results/jquery.suggest_results.js diff --git a/demo/index.html b/demo/fancy_suggest.html similarity index 73% rename from demo/index.html rename to demo/fancy_suggest.html index baeaf03..e9c1ba5 100644 --- a/demo/index.html +++ b/demo/fancy_suggest.html @@ -5,28 +5,29 @@ - Suggest Results Demo + Fancy Suggest Demo - - + + + - + + + ## Usage ### Local Javascript Array -To use Suggest Results, simply call it on a targeted text input element. For example if you have a search box for a users friends: +To use Fancy Results, simply call it on a targeted text input element. For example if you have a search box for a users friends: - $("#search_friends").suggest_results({ + $("#search_friends").fancy_suggest({ data: userFriends }); @@ -38,9 +39,9 @@ The `match` attribute is useful when you need to include extra information like ### Ajax Call -To fetch results via an Ajax call, attach Suggest Results like this to your input element: +To fetch results via an Ajax call, attach Fancy Results like this to your input element: - $("#search_friends").suggest_results({ + $("#search_friends").fancy_suggest({ url: "/search_friends_json.php" }); @@ -59,16 +60,16 @@ Also, a query cache is used so a specific search term is only requested once per ## Options -There's a number of options you can pass `$.suggest_results()`. +There's a number of options you can pass `$.fancy_suggest()`. * **data:** Javascript array with available results. -* **url:** URL to send ajax request to for results. Either `url` or `data` are required for Suggest Results to work at all. +* **url:** URL to send ajax request to for results. Either `url` or `data` are required for Fancy Results to work at all. * **name:** When used, the value is used as the class for the suggest box. Useful for having a custom styled suggest box one of two or more input fields with suggestion turned on. * **exact_match:** Results much be an exact match to typed input. If disabled any one word typed is a value match. Enabled by default, and has no effect when fetching results via Ajax. * **limit:** Limit the number of suggestions shown. When using the Ajax method, an extra `limit` GET/POST var is supplied. -* **no_results:** When set to true, a "No Results" label is shown if entered text doesn't yield any results. Enabled by default. +* **no\_results:** When set to true, a "No Results" label is shown if entered text doesn't yield any results. Enabled by default. * **no\_results\_label:** Text shown when there are no results if `no_results` is enabled. Default is "No Results". -* **url_method:** URL method used for Ajax call. Set to "get" or "post". Default is "get". +* **url\_method:** URL method used for Ajax call. Set to "get" or "post". Default is "get". ## Customization @@ -83,7 +84,7 @@ For example, if we want to display some extra info underneath our friend's names When we attach the suggestions to our input element, we specify the `tpl_result_body` option: - $("#search_friends").suggest_results({ + $("#search_friends").fancy_suggest({ url: "/search_friends_json.php", name: "search_friends", tpl_result_body: '{{title}}{{info}}' @@ -94,11 +95,11 @@ In the `tpl_result_body` option, `{{title}}` is replaced with the `title` attrib Then to prettify it, we add some CSS: /* Effects all suggestion boxes */ - #suggest_results li span.info { + #fancy_suggest li span.info { color: #888; } /* Effects only the #search_friends suggestion box */ - #suggest_results.search_friends li { + #fancy_suggest.search_friends li { border-bottom-style: dashed; } @@ -110,6 +111,7 @@ There are some more options available too for customization, so I recommend you * Handle mouse hovering and keyboard navigation a bit better when used at the same time on a suggest box. * Support suggesting search terms in addition to currently only supporting results. * Add callbacks for most things. +* Build other "fancy" input methods on top of `$.fancy_text()`. ## Notice @@ -119,7 +121,7 @@ I wrote this plugin in about 6-7 hours, so things could be a bit stupid. But at (The MIT License) -Copyright (c) 2009 Jim Myhrberg. +Copyright (c) 2011 Jim Myhrberg. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the @@ -142,5 +144,5 @@ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. [jquery]: http://jquery.com/ -[demo]: http://files.jimeh.me/projects/suggest_results/demo/ +[demo]: http://files.jimeh.me/projects/fancy_input/demo/ From 807c3b5b36f1467abb01c170771b4e05928f1434 Mon Sep 17 00:00:00 2001 From: Jim Myhrberg Date: Thu, 31 Mar 2011 23:42:27 +0100 Subject: [PATCH 6/8] auto-highlight when there is only one result so it can be selected by pressing enter/return --- fancy_input/jquery.fancy_suggest.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/fancy_input/jquery.fancy_suggest.js b/fancy_input/jquery.fancy_suggest.js index c6695a9..e255c4b 100644 --- a/fancy_input/jquery.fancy_suggest.js +++ b/fancy_input/jquery.fancy_suggest.js @@ -131,6 +131,7 @@ var terms = $.trim(this.get_value(elm, options)); if (options.exact_match) terms = terms.split(/\s/); if ((typeof(terms) == "string" && terms != "") || (typeof(terms) == "object" && terms.length > 0)) { + this.selected_result = null; if (typeof(options.url) === "string" && options.url !== "") { this.query_for_data(elm, options); } else { @@ -216,6 +217,9 @@ if (results.length > 0) { this.render(elm, results, options); this.show(); + if (results.length == 1) { + this.select_next(elm, options); + }; } else { this.no_results(elm, options); }; From c73182341f0e5276a68c0690b415a54d91516b9b Mon Sep 17 00:00:00 2001 From: Jim Myhrberg Date: Thu, 31 Mar 2011 23:43:34 +0100 Subject: [PATCH 7/8] started release v0.2.1 --- fancy_input/jquery.fancy_input.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/fancy_input/jquery.fancy_input.js b/fancy_input/jquery.fancy_input.js index c4c596d..fe39eb4 100644 --- a/fancy_input/jquery.fancy_input.js +++ b/fancy_input/jquery.fancy_input.js @@ -1,5 +1,5 @@ /*! - * Fancy Input v0.2.0 + * Fancy Input v0.2.1 * * Copyright (c) 2010 Jim Myhrberg. * Released under the MIT license. From 0ddd423e11ebe81c1f777bfdd586b54efb3cbaa6 Mon Sep 17 00:00:00 2001 From: Jim Myhrberg Date: Thu, 31 Mar 2011 23:43:48 +0100 Subject: [PATCH 8/8] fixed copyright year :P --- fancy_input/jquery.fancy_input.js | 2 +- fancy_input/jquery.fancy_suggest.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/fancy_input/jquery.fancy_input.js b/fancy_input/jquery.fancy_input.js index fe39eb4..f0ba2b1 100644 --- a/fancy_input/jquery.fancy_input.js +++ b/fancy_input/jquery.fancy_input.js @@ -1,7 +1,7 @@ /*! * Fancy Input v0.2.1 * - * Copyright (c) 2010 Jim Myhrberg. + * Copyright (c) 2011 Jim Myhrberg. * Released under the MIT license. */ (function($){ diff --git a/fancy_input/jquery.fancy_suggest.js b/fancy_input/jquery.fancy_suggest.js index e255c4b..e1f6ae9 100644 --- a/fancy_input/jquery.fancy_suggest.js +++ b/fancy_input/jquery.fancy_suggest.js @@ -1,7 +1,7 @@ /*! * Fancy Suggest * - * Copyright (c) 2010 Jim Myhrberg. + * Copyright (c) 2011 Jim Myhrberg. * Released under the MIT license. */ (function($){