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.

CommentFileSizeAuthor
#20 autocomplete2_1.patch4.13 KBFrando
#18 autocomplete_21.patch4.36 KBFrando
#10 autocomplete_15.patch1.42 KBUwe Hermann
#8 autocomplete_11.patch895 byteskilles@www.drop.org
#7 autocomplete_10.patch525 byteskilles@www.drop.org
#1 autocomplete_9.patch1.38 KBThox
autocomplete_8.patch1.39 KBThox

Comments

Thox’s picture

Thox commented
StatusFileSize
new autocomplete_9.patch1.38 KB

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

New patch attached.

Chris Johnson’s picture

Chris Johnson commented

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.

Steven’s picture

Steven commented

+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 .

Steven’s picture

Steven commented

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

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

Thox’s picture

Thox commented

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.

dries’s picture

dries commented

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.

killes@www.drop.org’s picture

killes@www.drop.org commented
StatusFileSize
new autocomplete_10.patch525 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.

killes@www.drop.org’s picture

killes@www.drop.org commented
Status: Needs review » Needs work
StatusFileSize
new autocomplete_11.patch895 bytes

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

Steven’s picture

Steven commented

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.

Uwe Hermann’s picture

Uwe Hermann commented
Status: Needs work » Needs review
StatusFileSize
new autocomplete_15.patch1.42 KB

Very very nice feature. I rerolled both changes into one patch. Ready to be committed, if you ask me.

singularo’s picture

singularo
Location Adelaide, AUS
commented
Status: Needs review » Reviewed & tested by the community

Looks nice to me, lets commit it.

Steven’s picture

Steven commented
Status: Reviewed & tested by the community » Needs work

-1 as this breaks HTML-formatted matches. Highlighting needs to happen on the server-side.

Jaza’s picture

Jaza commented
Version: x.y.z » 6.x-dev
Component: base system » javascript

+1 to this feature. Moving to 6.x-dev queue.

slayerment’s picture

slayerment commented
Version: 6.x-dev » 5.0

Is there a 5.0 patch?

Thanks!

Jaza’s picture

Jaza commented
Version: 5.0 » 6.x-dev

No, there is no 5.0 patch. Please leave this in the 6.x-dev queue, as this is a new feature, and won't be going into the Drupal 5 branch.

Steven’s picture

Steven commented

Nothing will happen to this patch unless someone changes it so the highlighting happens in the menu callback, not in the JavaScript. We cannot tell HTML from text in the JSON strings, and the server might want to do more advanced highlighting anyway.

Frando’s picture

Frando commented

trying to fix markup.

Frando’s picture

Frando commented
Status: Needs work » Needs review
StatusFileSize
new autocomplete_21.patch4.36 KB

So,
here's a patch for drupal HEAD that introduces a new theme function theme_autocomplete_highlight. All core autocompletes are altered to use the highlight theme function (user select, tag select, profile field values and profile field groups).

Works great and is a valuable usability enhancment, IMO.

Steven’s picture

Steven commented
Status: Needs review » Needs work

You should use preg_quote to escape the check_plained input.

Frando’s picture

Frando commented
Assigned: Unassigned » Frando
Status: Needs work » Needs review
StatusFileSize
new autocomplete2_1.patch4.13 KB

Right. Patch rerolled.

Steven’s picture

Steven commented
Status: Needs review » Needs work
  • Incorrect use of preg_quote
  • This patch modifies the autocomplete db_queries (by accident?). This is not part of this change.
  • There are code style problems with regards to spaces.
pancho’s picture

pancho
Location UTC+2 🇪🇺 EU
commented
Version: 6.x-dev » 7.x-dev
Component: javascript » theme system

Features have been frozen for a long time now. I'd like to see this in D7 though!

Moving to theme system, as we decided to go for a server based solution.

Uwe Hermann’s picture

Uwe Hermann commented

Patch doesn't apply anymore.

effulgentsia’s picture

effulgentsia commented
Title: Improved styling of autocomplete matches » Add and use theme_autocomplete_highlight() to provide visual feedback of what matched

+1. Anyone up for re-rolling a patch? @Dries: can it still make it into D7?

Status: Needs work » Closed (outdated)

Automatically closed because Drupal 7 security and bugfix support has ended as of 5 January 2025. If the issue verifiably applies to later versions, please reopen with details and update the version.