[TurboGears] Re: Auto Complete widget

[Jason Chu]

On Tue, 16 Jan 2007 18:05:12 -0800
Matthew Bevan <[EMAIL PROTECTED]> wrote:

> 
> Howdy!
> 
> Resurrecting this thoroughly dead thread...
> 
> Has anyone worked on creating a comma-separated AutoCompleteField  
> that's less of a hack than the following?  (E.g. the following would  
> work, but only when appending elements to the end.)
> 
> Jason Chu, you replied to the original thread mentioning that you
> had an in-house solution.  Any hope?  ;^)

Yeah, I extracted the stuff finally.  It definitely *won't* work with
just a copy and paste.  There are a couple of references to parts of
our code that I don't want to release, but I can explain how they need
to be changed.

In emailsearchwidget.py there are references to JSLocal and CSSLocal.
They will have to be converted to use the regular widget references.
I'm pretty sure the controller looks the same as before, the only
difference is the whole text area don't get replaced.

The code definitely isn't pretty, but it works.

Jason

autoCompleteInplace.js
Description: application/javascript

.autoTextResults {
	position: absolute;
	width: 100%;
	z-index: 100;
}

.autoTextTable {
	background-color: #ffffff;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid black;
}

.autoTextNormalRow {
	font-family: arial, sans-serif;
	font-size: 13px;
}

.autoTextSelectedRow {
	background-color: #3366cc;
	color: #ffffff;
	font-family: arial, sans-serif;
	font-size: 13px;
	cursor: pointer;
}

.autoTextHighlight {
	font-weight: bold;
}

.autoTextHidden {
	display: none;
}

class EmailSearchWidget(widgets.forms.CompoundFormField):
	"""Performs Ajax-style autocompletion by requesting search
	results from the server as the user types."""
	
	template = """
	<div xmlns:py="http://purl.org/kid/ns#";>
	<script language="JavaScript" type="text/JavaScript">
	    AutoCompleteManager${field_id} = new AutoCompleteManager('${field_id}',
	    '${text_field.field_id}',
	    '${search_controller}', '${search_param}', ${str(only_suggest).lower()},
	    '${tg.url([tg.widgets, 'turbogears.widgets/spinner.gif'])}');
	    addLoadEvent(AutoCompleteManager${field_id}.initialize);
	</script>
	
	${text_field.display(value_for(text_field), **params_for(text_field))}
	<div class="autoTextResults" id="autoCompleteResults${field_id}"/>
	</div>
	"""
	# Spinner was taken out, but here's the code if we want to put it back in.  Some code in autoCompleteInplace.js would need to be 
	# uncommented
	#<img name="autoCompleteSpinner${name}" id="autoCompleteSpinner${field_id}" src="${tg.url([tg.widgets, 'turbogears.widgets/spinnerstopped.png'])}" alt="" />
	javascript = [mochikit, JSLocal("autoCompleteInplace.js")]
	css = [CSSLocal("autocompleteinplace.css")]

	text_field = widgets.forms.TextArea(name="text", attrs={
		'rows': 1, 'cols': 50,
		'disabled': True,
		'style': "overflow-y: auto; font-family: monospace; font-size: inherit; width:100%",
		'wrap': 'soft'}, )
	attrs = {}
	search_controller = ""
	search_param = "searchString"
	only_suggest = False

	member_widgets = ["text_field"]
	params = ["search_controller", "search_param", 
		"result_name", "attrs", "only_suggest", ]
	
	def __init__(self, name, *args, **kw):
		if kw.has_key('validator') and kw['validator']:
			self.text_field.validator = kw['validator']
			del kw['validator']
		super(EmailSearchWidget, self).__init__(name=name, *args, **kw)

signature.asc
Description: PGP signature