Posted by Bèr Kessels on March 14, 2007 at 9:06am
6 followers
| Project: | Drupal core |
| Version: | 6.x-dev |
| Component: | forms system |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Frando |
| Status: | closed (duplicate) |
Issue Summary
The following code provides a simple addition to the autofill. The code is very specific for my case, but it shows very clear how this van be used in the taxonomy (tags) autofill and the username autofill in core too.
What it does, is putting strong tags around the string. Say I type erda, the found strings are Amsterdam and Rotterdam, the autofill-options now show Amsterdam and Rotterdam
See a screenshot for how this improves things.
Problem: people fail to recognise the autfill as such, often mistake it for their in-browser forlmfield history.
Problem: People have difficulties correlating the typed string to the returned values.
solution: visualise the relation typed-returned.
/**
* Helper function for autocompletion of cities.
* This is mostly stolen from other parts of Drupal.
*/
function sms_node_autocomplete($string) {
$regexp = '%(?:^|,\ *)("(?>[^"]*)(?>""[^"]* )*"|(?: [^",]*))%x';
preg_match_all($regexp, $string, $matches);
$array = $matches[1];
$last_string = trim(array_pop($array));
$matches = array();
foreach (sms_node_list_of_cities() as $city) {
if (strstr($city->name, $last_string)) {
$c = $city->name;
// Commas and quotes in terms are special cases, so encode 'em.
if (preg_match('/,/', $city->name) || preg_match('/"/', $city->name)) {
$c = '"'. preg_replace('/"/', '""', $city->name) .'"';
}
$name = str_replace($last_string, '<strong>'. $last_string .'</strong>', check_plain($city->name));
}
$users = format_plural($city->count, '1 user', '%count users', array('%count' => $city->count));
$prefix = count($array) ? implode(', ', $array) .', ' : '';
$matches[$prefix . $c] = '<span class="autocomplete-title">'. $name . '</span> <span class="autocomplete-amount">('. $users .')</span>';
}
print drupal_to_js($matches);
exit();
}| Attachment | Size | Status | Test result | Operations |
|---|---|---|---|---|
| highlight_found_string.png | 8.75 KB | Ignored: Check issue status. | None | None |
Comments
#1
This would be a great feature. I always loved how Google Maps does it with addresses. For core, would we just need a patch for user_ and taxonomy_autocomplete? Hmmm....any regex takers?
#2
Great idea!
Actually, it's even simpler to do this in the client-side javascript (as then you don't have to adjust all autocomplete functions), and that's exactly what I did.
It's working great, enhances usability, and it's only 2 lines of code!
Only caveat: For the freetagging autoselect, it's only highlighting the first tag you enter, as from then on, the user input does not match the returned matches anymore (as the input contains also the previously entered comma-seperated tags). Not sure wether we should special case this.
Additionally, now that the entered string is highlighted inside the returned match, I altered the profile and user autocomplete functions to search also for matches inside the user/profile names (not only at the beginning).
#3
screenshot
#4
this looks great, but IMO should be kept optional
For instance, if your autocomplete callback is designed to only match the beginning of strings, this is of little relevance.
More importantly, you'd probably want to turn highlighting off if you return html code.
#5
Seems like we could handle the optional-ness by making another form API property:
#autocomplete_highlight = TRUE or FALSE
#6
Yup, good idea to make it optional.
I added a FAPI property for it, #autocomplete_highlight, which defaults to true (for the textfield element). If it's set to false, no highlighting will happen in autocomplete.js.
#7
This has been proposed before. Doing it on the client side is impossible, as the match labels are HTML. The highlighting must be done on the server.
http://drupal.org/node/24932
#8
I posted a patch for drupal HEAD in http://drupal.org/node/24932 .