5 Commits

Author SHA1 Message Date
c1e25e30c1 bumped version to v0.1.2 2010-03-10 22:57:47 +02:00
d9e5bf3f22 fixed a serious bug with form submission and
return/enter key handling
2010-03-10 22:57:23 +02:00
05a0ccfe06 bumped version to v0.1.1 2010-03-10 19:45:01 +02:00
7b7ad0a285 better handling when both keyboard and mouse is
used to navigate suggested results
2010-03-10 19:44:34 +02:00
50e0711be0 fixed some typos in readme 2010-03-10 19:37:49 +02:00
3 changed files with 35 additions and 16 deletions

View File

@@ -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"} {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. 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. 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": [ {"results": [
{"title": "John Doe", "href": "/user/johndoe"}, {"title": "John Doe", "href": "/user/johndoe"},
{"title": "Mike Smith", "href": "/user/msmith"} {"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 ## 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. * **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 Suggest Results to work at all.

View File

@@ -47,7 +47,6 @@
display: block; display: block;
} }
#suggest_results li.result a:hover,
#suggest_results li.result.selected a { #suggest_results li.result.selected a {
background: #698DE5; background: #698DE5;
color: #fff; color: #fff;

View File

@@ -1,5 +1,5 @@
/*! /*!
* Suggest Results v0.1.0 * Suggest Results v0.1.2
* http://github.com/jimeh/suggest_results * http://github.com/jimeh/suggest_results
* *
* Copyright (c) 2010 Jim Myhrberg. * Copyright (c) 2010 Jim Myhrberg.
@@ -32,11 +32,24 @@
self.hide(); self.hide();
}).keydown(function(e){ }).keydown(function(e){
switch(e.keyCode) { switch(e.keyCode) {
case ARRUP: self.select_prev($e, $options); return false; case ARRUP:
case ARRDN: self.select_next($e, $options); return false; self.select_prev($e, $options);
case ESC: self.clear($e, $options); break; return false;
case RETURN: self.activate_selected($options); return false; case ARRDN:
default: self.clearTimeout(); self.search($e, $options); 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){ }).keyup(function(e){
if (e.keyCode > SPECIALS_END || e.keyCode == BACKSPACE) { if (e.keyCode > SPECIALS_END || e.keyCode == BACKSPACE) {
@@ -119,6 +132,11 @@
self.list.html(html); self.list.html(html);
$(".result", self.list).click(function(){ $(".result", self.list).click(function(){
self.redirect_to($("a", $(this)).attr("href")); 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; var limit = self.current_results.length;
if (limit > 0) { if (limit > 0) {
if (self.selected_result === null) { if (self.selected_result === null) {
$(".selected", self.list).removeClass("selected");
self.selected_result = 0; self.selected_result = 0;
$("#suggested_result_" + self.selected_result, self.box).addClass("selected"); $("#suggested_result_" + self.selected_result, self.box).addClass("selected");
} else if (self.selected_result + 1 < limit) { } else if (self.selected_result + 1 < limit) {
$(".selected", self.box).removeClass("selected"); $(".selected", self.list).removeClass("selected");
self.selected_result++; self.selected_result++;
$("#suggested_result_" + self.selected_result, self.box).addClass("selected"); $("#suggested_result_" + self.selected_result, self.box).addClass("selected");
} else { } else {
$(".selected", self.box).removeClass("selected"); $(".selected", self.list).removeClass("selected");
self.selected_result = null; self.selected_result = null;
elm.putCursorAtEnd(); elm.putCursorAtEnd();
}; };
@@ -189,14 +208,15 @@
var limit = self.current_results.length; var limit = self.current_results.length;
if (limit > 0) { if (limit > 0) {
if (self.selected_result === null) { if (self.selected_result === null) {
$(".selected", self.list).removeClass("selected");
self.selected_result = limit - 1; self.selected_result = limit - 1;
$("#suggested_result_" + self.selected_result, self.box).addClass("selected"); $("#suggested_result_" + self.selected_result, self.box).addClass("selected");
} else if (self.selected_result > 0) { } else if (self.selected_result > 0) {
$(".selected", self.box).removeClass("selected"); $(".selected", self.list).removeClass("selected");
self.selected_result--; self.selected_result--;
$("#suggested_result_" + self.selected_result, self.box).addClass("selected"); $("#suggested_result_" + self.selected_result, self.box).addClass("selected");
} else { } else {
$(".selected", self.box).removeClass("selected"); $(".selected", self.list).removeClass("selected");
self.selected_result = null; self.selected_result = null;
elm.putCursorAtEnd(); elm.putCursorAtEnd();
}; };