Author: chrisz
Date: Wed Jan 23 14:22:17 2008
New Revision: 4034
URL: http://trac.turbogears.org/changeset/4034
Log:
More polishing of the AutoCompleteField:
- added docs for the parameters
- with search_param='*', all fields are passed to the controller
- with show_spinner=False, the spinner can be suppressed
- the hidden field is now optional in the Javascript code
Modified:
branches/1.1/turbogears/widgets/big_widgets.py
branches/1.1/turbogears/widgets/static/autocompletefield.js
Modified: branches/1.1/turbogears/widgets/big_widgets.py
==============================================================================
--- branches/1.1/turbogears/widgets/big_widgets.py (original)
+++ branches/1.1/turbogears/widgets/big_widgets.py Wed Jan 23 14:22:17 2008
@@ -19,7 +19,7 @@
css = [CSSLink(static, "calendar/calendar-system.css")]
template = """
<div xmlns:py="http://purl.org/kid/ns#";>
- <input type="text" id="${field_id}" class="${field_class}" name="${name}"
value="${strdate}" py:attrs="attrs"/>
+ <input type="text" id="${field_id}" class="${field_class}" name="${name}"
value="${strdate}" py:attrs="attrs" />
<input type="button" id="${field_id}_trigger" class="date_field_button"
value="${button_text}" />
<script type="text/javascript">
Calendar.setup(
@@ -121,21 +121,32 @@
AutoCompleteManager${field_id} = new AutoCompleteManager('${field_id}',
'${text_field.field_id}', '${hidden_field.field_id}',
'${search_controller}', '${search_param}',
'${result_name}',${str(only_suggest).lower()},
- '${tg.url([tg.widgets, 'turbogears.widgets/spinner.gif'])}',
${complete_delay}, ${str(take_focus).lower()});
+ '${show_spinner and tg.url([tg.widgets,
'turbogears.widgets/spinner.gif']) or None}',
+ ${complete_delay}, ${str(take_focus).lower()});
addLoadEvent(AutoCompleteManager${field_id}.initialize);
</script>
${text_field.display(value_for(text_field), **params_for(text_field))}
- <img name="autoCompleteSpinner${name}" id="autoCompleteSpinner${field_id}"
src="${tg.url([tg.widgets, 'turbogears.widgets/spinnerstopped.png'])}" alt="" />
- <div class="autoTextResults" id="autoCompleteResults${field_id}"/>
+ <img py:if="show_spinner" name="autoCompleteSpinner${name}"
+ id="autoCompleteSpinner${field_id}"
+ src="${tg.url([tg.widgets, 'turbogears.widgets/spinnerstopped.png'])}"
alt="" />
+ <div class="autoTextResults" id="autoCompleteResults${field_id}" />
${hidden_field.display(value_for(hidden_field),
**params_for(hidden_field))}
</div>
"""
javascript = [mochikit, JSLink(static,"autocompletefield.js")]
css = [CSSLink(static,"autocompletefield.css")]
member_widgets = ["text_field", "hidden_field"]
- params = ["search_controller", "search_param", "result_name",
- "attrs", "only_suggest", "complete_delay", "take_focus"]
+ params = ["search_controller", "search_param", "result_name", "attrs",
+ "only_suggest", "complete_delay", "take_focus", "show_spinner"]
+ params_doc = {'search_controller': 'Name of the controller returning the
auto completions',
+ 'search_param': 'Name of the search parameter ("*" passes all form
fields)',
+ 'result_name': 'Name of the result list returned by the controller',
+ 'attrs': 'Extra attributes',
+ 'only_suggest': 'If true, pressing enter does not automatically submit
the first list item.',
+ 'complete_delay': 'Delay (in seconds) before loading new auto
completions',
+ 'take_focus': 'If true, take focus on load.',
+ 'show_spinner': 'If false, the spinner (load indicator) is not shown.'}
text_field = TextField(name="text")
hidden_field = HiddenField(name="hidden")
attrs = {}
@@ -145,6 +156,7 @@
only_suggest = False
complete_delay = 0.200
take_focus = False
+ show_spinner = True
class AutoCompleteFieldDesc(CoreWD):
name = "Auto Complete"
Modified: branches/1.1/turbogears/widgets/static/autocompletefield.js
==============================================================================
--- branches/1.1/turbogears/widgets/static/autocompletefield.js (original)
+++ branches/1.1/turbogears/widgets/static/autocompletefield.js Wed Jan 23
14:22:17 2008
@@ -33,9 +33,12 @@
AutoCompleteManager.prototype.initialize = function() {
// Text field must be set after page renders
this.textField = getElement(this.textid);
- this.hiddenField = getElement(this.hiddenid);
- this.spinner = getElement("autoCompleteSpinner" + this.id);
- this.spinnerOffImg = getNodeAttribute(this.spinner,'src');
+ if (this.hiddenid)
+ this.hiddenField = getElement(this.hiddenid);
+ if (this.spinnerOnImg) {
+ this.spinner = getElement("autoCompleteSpinner" + this.id);
+ this.spinnerOffImg = getNodeAttribute(this.spinner, 'src');
+ }
updateNodeAttributes(this.textField, {
"onkeyup": this.theKeyUp,
@@ -47,7 +50,8 @@
// Ensure the initial value doesn't get discarded
this.lastTextResult = this.textField.value;
- this.lastHiddenResult = this.hiddenField.value;
+ if (this.hiddenField)
+ this.lastHiddenResult = this.hiddenField.value;
if (this.takeFocus) {
this.textField.focus();
this.gotFocus();
@@ -95,8 +99,10 @@
// This is gross, but if you are smarter then me (most likely) please
fix this:
if (key == 8 || key == 46) {
checkIfCleared = function checkIfCleared(theManager) {
- if (theManager.textField.value.length == 0)
- theManager.hiddenField.value = '';
+ if (theManager.textField.value.length == 0) {
+ if (this.hiddenField)
+ theManager.hiddenField.value = '';
+ }
}
callLater(0.1, checkIfCleared, this);
}
@@ -275,7 +281,12 @@
var searchParam = this.searchParam;
var params = {"tg_format": "json",
"tg_random": new Date().getTime()};
- params[searchParam] = this.textField.value;
+ if (searchParam == "*") {
+ el = this.textField.form.elements
+ for (var i=0; i<el.length; ++i)
+ params[el[i].name] = el[i].value;
+ } else if (searchParam)
+ params[searchParam] = this.textField.value;
var d = loadJSONDoc(this.searchController + "?" + queryString(params));
d.addCallback(this.displayResults);
@@ -303,10 +314,12 @@
// auto completions.
this.delayedRequest = callLater(this.completeDelay,
this.doDelayedRequest);
- if (this.lastTextResult == this.textField.value)
- this.hiddenField.value = this.lastHiddenResult;
- else
- this.hiddenField.value = '';
+ if (this.hiddenField) {
+ if (this.lastTextResult == this.textField.value)
+ this.hiddenField.value = this.lastHiddenResult;
+ else
+ this.hiddenField.value = '';
+ }
return true;
};
