mirror of
https://github.com/jimeh/fancy_input.git
synced 2026-02-19 11:36:41 +00:00
Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| c1e25e30c1 | |||
| d9e5bf3f22 | |||
| 05a0ccfe06 | |||
| 7b7ad0a285 | |||
| 50e0711be0 |
10
README.md
10
README.md
@@ -32,7 +32,7 @@ In the above example, `userFriends` is a javascript array that would look someth
|
||||
{title: "Mike Smith", href: "/user/msmith", match: "msmith mikesmith@gmail.com"}
|
||||
];
|
||||
|
||||
This array needs to have two vital attributes, `title` and `href`. When filtering results based on what's been typed in the input field, the `title` and `match` attributes are used. `match` is optional, but `title` is required. `href` is the url to redirect the browser too when the result is selected.
|
||||
This array needs to have two vital attributes, `title` and `href`. When filtering results based on what's been typed in the input field, the `title` and `match` attributes are used. `match` is optional, but `title` is required. `href` is the url to redirect the browser to when the result is selected.
|
||||
|
||||
The `match` attribute is useful when you need to include extra information like a username or email and get results based on this data without having to display it.
|
||||
|
||||
@@ -46,20 +46,20 @@ To fetch results via an Ajax call, attach Suggest Results like this to your inpu
|
||||
|
||||
As a user starts typing, this will trigger a GET request to `/search_friends/json?limit=6&search=j` if the user has started typing `j`. We'll get to the `limit` option a bit later.
|
||||
|
||||
Output from `search_friends_json.php` must be in JSON, and look like this:
|
||||
Output from `search_friends_json.php` must be in JSON, and look something like this:
|
||||
|
||||
{"results": [
|
||||
{"title": "John Doe", "href": "/user/johndoe"},
|
||||
{"title": "Mike Smith", "href": "/user/msmith"}
|
||||
]}
|
||||
|
||||
Notice how the `match` attribute is not included, as it's not supported for server-side result fetching. No filtering is done in javascript of the results returned, hence `match` is useless. You should do all filtering and order server-side if going ajax-style.
|
||||
Notice how the `match` attribute is not included, as it's not supported for server-side result fetching. No filtering is done client-side of the results returned, hence `match` is useless. You should do all filtering and ordering server-side if going ajax-style.
|
||||
|
||||
Also, a query cache is used so a specific search term is only requested once per page load. Otherwise new ajax calls would be triggered every for each time a user hits the backspace key to remove a letter.
|
||||
Also, a query cache is used so a specific search term is only requested once per page load. Otherwise new ajax calls would be triggered each time a user hits the backspace key to remove a letter for example.
|
||||
|
||||
## Options
|
||||
|
||||
There's a number of options you can pass `$.suggest_results`.
|
||||
There's a number of options you can pass `$.suggest_results()`.
|
||||
|
||||
* **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.
|
||||
|
||||
@@ -47,7 +47,6 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
#suggest_results li.result a:hover,
|
||||
#suggest_results li.result.selected a {
|
||||
background: #698DE5;
|
||||
color: #fff;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Suggest Results v0.1.0
|
||||
* Suggest Results v0.1.2
|
||||
* http://github.com/jimeh/suggest_results
|
||||
*
|
||||
* Copyright (c) 2010 Jim Myhrberg.
|
||||
@@ -32,11 +32,24 @@
|
||||
self.hide();
|
||||
}).keydown(function(e){
|
||||
switch(e.keyCode) {
|
||||
case ARRUP: self.select_prev($e, $options); return false;
|
||||
case ARRDN: self.select_next($e, $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);
|
||||
case ARRUP:
|
||||
self.select_prev($e, $options);
|
||||
return false;
|
||||
case ARRDN:
|
||||
self.select_next($e, $options);
|
||||
return false;
|
||||
case ESC:
|
||||
self.clear($e, $options);
|
||||
break;
|
||||
case RETURN:
|
||||
if (self.selected_result !== null) {
|
||||
self.activate_selected($options);
|
||||
return false;
|
||||
}
|
||||
break;
|
||||
default:
|
||||
self.clearTimeout();
|
||||
self.search($e, $options);
|
||||
}
|
||||
}).keyup(function(e){
|
||||
if (e.keyCode > SPECIALS_END || e.keyCode == BACKSPACE) {
|
||||
@@ -119,6 +132,11 @@
|
||||
self.list.html(html);
|
||||
$(".result", self.list).click(function(){
|
||||
self.redirect_to($("a", $(this)).attr("href"));
|
||||
}).hover(function(){
|
||||
$(".selected", self.list).removeClass("selected");
|
||||
$(this).addClass("selected");
|
||||
},function(){
|
||||
$(this).removeClass("selected");
|
||||
});
|
||||
};
|
||||
|
||||
@@ -169,14 +187,15 @@
|
||||
var limit = self.current_results.length;
|
||||
if (limit > 0) {
|
||||
if (self.selected_result === null) {
|
||||
$(".selected", self.list).removeClass("selected");
|
||||
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");
|
||||
$(".selected", self.list).removeClass("selected");
|
||||
self.selected_result++;
|
||||
$("#suggested_result_" + self.selected_result, self.box).addClass("selected");
|
||||
} else {
|
||||
$(".selected", self.box).removeClass("selected");
|
||||
$(".selected", self.list).removeClass("selected");
|
||||
self.selected_result = null;
|
||||
elm.putCursorAtEnd();
|
||||
};
|
||||
@@ -189,14 +208,15 @@
|
||||
var limit = self.current_results.length;
|
||||
if (limit > 0) {
|
||||
if (self.selected_result === null) {
|
||||
$(".selected", self.list).removeClass("selected");
|
||||
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");
|
||||
$(".selected", self.list).removeClass("selected");
|
||||
self.selected_result--;
|
||||
$("#suggested_result_" + self.selected_result, self.box).addClass("selected");
|
||||
} else {
|
||||
$(".selected", self.box).removeClass("selected");
|
||||
$(".selected", self.list).removeClass("selected");
|
||||
self.selected_result = null;
|
||||
elm.putCursorAtEnd();
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user