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

updated readme and license files

Browse Source
This commit is contained in:
Jim Myhrberg
2011-03-31 23:22:14 +01:00
parent ab085dbeaf
commit 33aefc7bbe
2 changed files with 20 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
LICENSE
View File

@@ -1,6 +1,6 @@
(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

36
README.md
View File

@@ -1,4 +1,4 @@
# Suggest Results
# Fancy Input / Fancy Suggest
Easily customizable search suggestion plugin for jQuery, which suggests results directly, rather than search terms.
@@ -10,18 +10,19 @@ Check out the [Demo][].
First of all you will need [jQuery][], visit their [site][jquery] for more info.
Then include both `jquery.suggest_results.js` and `jquery.suggest_results.css` on your page.
Then include both `jquery.fancy_input.js` and `jquery.fancy_input.css` on your page.
<script src="/suggest_results/jquery.suggest_results.js" type="text/javascript"></script>
<link href="/suggest_results/jquery.suggest_results.css" rel="stylesheet" type="text/css" />
<script src="/fancy_input/jquery.fancy_input.js" type="text/javascript"></script>
<script src="/fancy_input/jquery.fancy_suggest.js" type="text/javascript"></script>
<link href="/fancy_input/jquery.fancy_input.css" rel="stylesheet" type="text/css" />
## 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: '<span class="title">{{title}}</span><span class="info">{{info}}</span>'
@@ -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/