make autocompleter more customizable
------------------------------------
Key: WICKET-1716
URL: https://issues.apache.org/jira/browse/WICKET-1716
Project: Wicket
Issue Type: New Feature
Components: wicket-extensions
Reporter: Peter Ertl
disclaimer: Excuse this somehow large explanation :-(
Problems in current wicket autocompleter implementation (including patch)
Wicket will by default make the width of the autocompleter the same as the
width of the related input field. This is often useful but also can be really
nasty sometimes. Imagine you have a input control to enter the ISBN of a book
(size: 13 digits). While typing any parts of the book's title, author, genre,
year or ISBN the autocompleter should popup a list of book entries like which
contains the matching input string:
autocompleter output (structure)
--- item 1 ---
ISBN 1
AUTHOR 1
TITLE 1
GENRE 1
YEAR 1
--- item 2 ---
ISBN 2
AUTHOR 2
TITLE 2
GENRE 2
YEAR 2
--------------
...
--- item n ---
When pressing enter the input field will be filled with the ISBN of the
currently selected book.
BTW since WICKET-488 is resolved the other read-only fields of the form will
contain title, author, etc. (Thanks, Igor!! :-)
Now the problem: Typically the autocompleter entry (especially the book title)
will be a lot a longer than the 13 digit ISBN number. The only chance is to
make the wicket autocompleter selection as large as required is to make the
input field ridiculously long (something like 80 chars or even more). This is
really ugly and wastes a lot of space in the user interface for no reason. Also
it will confuse the user who thinks the input really needs to be that long.
Typically wicket's autocompleter markup looks like this:
HTML
<div id="isbn1-autocomplete-container" style="overflow: auto; position:
absolute; left: 8px; top: 30px; width: 155px;" class="wicket-aa-container">
<div class="wicket-aa" id="text1-autocomplete">
<ul>
<li class="selected" textvalue="978-1932394986">.....</li>
<li textvalue="978-1932394222">.....</li>
....
<li textvalue="978-1932311186">.....</li>
</ul>
</div>
</div>
The 'style' attribute in the <div> contains 'width:155px' and is impossible to
override from CSS because 'style' is "stronger" (the 'cascading' in css).
So I attached a patch to enable / disable the adjustment of the width to the
input field.
JAVA
final AutoCompleteSettings opts = new AutoCompleteSettings();
opts.setAdjustInputWidth(false);
field.add(new AutoCompleteBehavior(renderer, opts)
...
The markup will now look like this:
HTML
<div id="isbn1-autocomplete-container" style="overflow: auto; position:
absolute; left: 8px; top: 30px;" class="wicket-aa-container">
Notice the lack of the 'width' attribute...
Now to resolve problem #1 you could write:
MYSTYLE.CSS
.wicket-aa-container {
width: 600px;
}
However this will not only grow the great book autocompleter to the desired
width but also other autocompleters ever being used on that as well. Also you
can _NOT_ do this:
MYSTYLE.CSS
#isbn1-autocomplete-container {
width: 600px;
}
Because a linked stylesheet is typically static (and cached by the browser) and
the DOM id of the autocompleter is generated dynamically. I don't consider
generating dynamic CSS an option for such a simple problem.
So what would be just great is the possibility to add an extra css class to the
container tag:
JAVA
final AutoCompleteSettings opts = new AutoCompleteSettings();
opts.setCssClassName("book-autocompleter");
opts.setAdjustInputWidth(false);
field.add(new AutoCompleteBehavior(renderer, opts)
...
HTML
<div id="isbn1-autocomplete-container" style="overflow: auto; position:
absolute; left: 8px; top: 30px;" class="wicket-aa-container book-autocompleter">
You will immediately notice the additional class name 'book-autocompleter'
MYSTYLE.CSS
.book-autocompleter {
width: 600px;
}
To summarize my patch:
To extra methods in
org.apache.wicket.extensions.ajax.markup.html.autocomplete.AutoCompleteSettings
/**
* Sets an CSS class name to add to the autocompleter markup container
* <p/>
* This makes it easier to have multiple autocompleters in your application
* with different style and layout.
*
* @param cssClassName valid CSS class name
*/
public void setCssClassName(final String cssClassName)
/**
* Adjust the width of the autocompleter selection window to the width of the
related input field.
* <p/>
* Otherwise the size will depend on the default browser behavior and CSS.
*
* @param adjustInputWidth <code>true</code> if the autocompleter should
have the same size as
* the input field, <code>false</code> for default
browser behavior
*/
public void setAdjustInputWidth(final boolean adjustInputWidth)
Unless you call these methods the autocompleter will behave exactly as before
so this will not break previous code.
Would be just great to see this patch applied :-)
--
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.
