Author: chrisz
Date: Wed Jan 23 11:19:46 2008
New Revision: 4030
URL: http://trac.turbogears.org/changeset/4030
Log:
Fixed some glitches in the AutoCompleteField:
- when no suggestion was found, an ugly "fly spot" was displayed
- the top of the auto-suggest box bordered directly on the text field - this
looked ugly, too
- on updated selection, the cursor did not jump to the end of the text
Modified:
branches/1.1/turbogears/widgets/static/autocompletefield.css
branches/1.1/turbogears/widgets/static/autocompletefield.js
Modified: branches/1.1/turbogears/widgets/static/autocompletefield.css
==============================================================================
--- branches/1.1/turbogears/widgets/static/autocompletefield.css
(original)
+++ branches/1.1/turbogears/widgets/static/autocompletefield.css Wed Jan
23 11:19:46 2008
@@ -1,14 +1,14 @@
.autoTextResults {
position: absolute;
z-index: 100;
+ border-right: 2px solid #eee;
+ border-bottom: 2px solid #eee;
+ display: none;
}
.autoTextTable {
- background-color: #ffffff;
- border-top: 1px solid black;
- border-bottom: 1px solid black;
- border-left: 1px solid black;
- border-right: 1px solid black;
+ background-color: #fff;
+ border: 1px solid black;
}
.autoTextNormalRow {
@@ -17,8 +17,8 @@
}
.autoTextSelectedRow {
- background-color: #3366cc;
- color: #ffffff;
+ background-color: #36c;
+ color: #fff;
font-family: arial, sans-serif;
font-size: 13px;
cursor: pointer;
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
11:19:46 2008
@@ -156,20 +156,23 @@
};
AutoCompleteManager.prototype.updateSelectedResult = function() {
- // TODO: Add code to move the cursor to the end of the line
+ // Set classes to show currently selected row
for (var i=0; i<this.numResultRows; i++) {
if (this.selectedResultRow == i)
swapElementClass("autoComplete" + this.id + i,
"autoTextNormalRow", "autoTextSelectedRow");
else
swapElementClass("autoComplete" + this.id + i,
"autoTextSelectedRow", "autoTextNormalRow");
}
+ // Move the cursor to the end of the line
+ var textField = getElement(this.textField);
+ var value = textField.value
+ textField.value = "";
+ textField.value = value;
}
AutoCompleteManager.prototype.clearResults = function() {
- // Remove all the results
- var resultsHolder = getElement("autoCompleteResults" + this.id);
- replaceChildNodes(resultsHolder, null);
-
+ // Hide all the results
+ hideElement(getElement("autoCompleteResults" + this.id));
// Clear out our result tracking
this.selectedResultRow = 0;
this.numResultRows = 0;
@@ -241,18 +244,18 @@
// Swap out the old results with the newly created table
var resultsHolder = getElement("autoCompleteResults" + this.id);
- replaceChildNodes(resultsHolder, fancyTable);
-
- var textField = getElement(this.textField);
- var p = document.getElementById("autoCompleteResults" + this.id);
- if (p) {
- p.style.left = getLeft(textField) + "px";
- p.style.top = getBottom(textField) + "px";
- }
+ if (this.isShowingResults) {
+ var textField = getElement(this.textField);
+ resultsHolder.style.left = getLeft(textField) + "px";
+ resultsHolder.style.top = getBottom(textField) + 1 + "px";
+ replaceChildNodes(resultsHolder, fancyTable);
+ this.updateSelectedResult();
+ showElement(resultsHolder);
+ } else hideElement(resultsHolder);
- this.updateSelectedResult();
this.processCount--;
if (this.processCount == 0) this.spinnerToggle('off');
+ return true;
}
AutoCompleteManager.prototype.doDelayedRequest = function () {
@@ -278,6 +281,7 @@
var d = loadJSONDoc(this.searchController + "?" + queryString(params));
d.addCallback(this.displayResults);
+ return true;
}
AutoCompleteManager.prototype.theKeyUp = function(event) {
