[drupal-devel] [feature] Improved styling of autocomplete matches

[Steven]

Issue status update for 
http://drupal.org/node/24932
Post a follow up: 
http://drupal.org/project/comments/add/24932

 Project:      Drupal
 Version:      cvs
 Component:    base system
 Category:     feature requests
 Priority:     normal
 Assigned to:  Anonymous
 Reported by:  Thox
 Updated by:   Steven
 Status:       patch (code needs work)

Yeah... the autocomplete separates displayed HTML from the autocomplete
value, so you can just pass each match through a
theme_autocomplete_highlight() or something which does a simple
preg_replace by default.




Steven



Previous comments:
------------------------------------------------------------------------

Mon, 13 Jun 2005 18:07:55 +0000 : Thox

Attachment: http://drupal.org/files/issues/autocomplete_8.patch (1.39 KB)

I'd like the autocomplete matches to be underlined (or styled in some
way) so that users can see which part of the strings returned was
actually matched. See Screenshot [1].
[1] http://photos14.flickr.com/19139302_0acb27f00d_o.png




------------------------------------------------------------------------

Mon, 20 Jun 2005 09:04:33 +0000 : Thox

Attachment: http://drupal.org/files/issues/autocomplete_9.patch (1.38 KB)

Using bold instead of underline is much more effective. See screenshot
[2] or my usual autocomplete demo page [3].


New patch attached.
[2] http://photos16.flickr.com/20434923_0760dbda6c_o.png
[3] http://brandedthoughts.co.uk/story/drupal-autocomplete-demo




------------------------------------------------------------------------

Mon, 20 Jun 2005 14:47:24 +0000 : Chris Johnson

Very nice feedback.  On your demo page, I like the icon in the text
field that indicates active "matching."


One small bug (it seems).  Typing "c" alone gets me a list of matches,
but the last (bottom) entry has a piece of javascript appended to it
with a line through it.


Using Firefox 1.04 on Windows 2000.


Similar bug, but with several lines of javascript fragments in the
match box, appears using MSIE 6 on Windows 2000.




------------------------------------------------------------------------

Mon, 20 Jun 2005 18:57:31 +0000 : Steven

+1 on the idea, but wouldn't it be better to have the highlighting be
done in a themable function on the server side?


For one thing, it makes it more flexible. But also, the displayed
values can contain HTML, so there might be conflicts with HTML tags in
there if you do a blind search and replace on the client-side. Think
icons/thumbnails, Google Suggest-style popularity counts/indicators,
etc.


If bloating the ajax data is a concern, then perhaps the default
themable should use <strong> instead of .




------------------------------------------------------------------------

Mon, 20 Jun 2005 19:07:33 +0000 : Steven

...instead of <span class="match">.


By the way Chris, the animated icon is called the throbber and it is
part of core.




------------------------------------------------------------------------

Tue, 21 Jun 2005 06:46:32 +0000 : Thox

Steven, originally I used an underline, then I used bold. Is it right to
use <strong> if the style might be completely different?


I'm hoping to get the server side to use even less bandwidth. In the
future, I'd like to remove the drupal_implode_matches function and get
the folksonomy field working based on client-side code. This would
remove duplicate data on the vast majority of autocomplete callbacks.


A suggestion was made in #drupal that the delay should be adjustable
(either at coding time or with a simple admin control). The other
suggestion, which appeals more to me, is to get the javascript to run a
timer and adjust the suggestions delay based on the response time of the
requests.




------------------------------------------------------------------------

Tue, 21 Jun 2005 18:27:32 +0000 : Dries

Typically, bandwidth isn't the problem.  The problem is the fact we have
to load the entire core to handle a single request.  That is, CPU cycles
is the problem, not bandwidth.  Personally, I'm in favor of keeping the
Javascript code simple.




------------------------------------------------------------------------

Sat, 06 Aug 2005 13:58:48 +0000 : killes at www.drop.org

Attachment: http://drupal.org/files/issues/autocomplete_10.patch (525 bytes)

ok, the patch bingo oracle can be cryptic: Why did I get a patch that
has both CSS and JS?


Anyway: Thox' second patch didn't apply anymore, I've rerolled it and
attach it.


The discussion has strayed a bit from the original issue, but I think
that a server based solution (eg a themable function) is to be
preferred.




------------------------------------------------------------------------

Sat, 06 Aug 2005 14:10:14 +0000 : killes at www.drop.org

Attachment: http://drupal.org/files/issues/autocomplete_11.patch (895 bytes)

oops, part of the patch went mia. Seeting to "needs work" as i 'd really
prefer a themable function.