From cd1f17a0f01c88dab8b8112ae206d3c3b03ffed2 Mon Sep 17 00:00:00 2001
From: Lance Edgar <lance@edbob.org>
Date: Thu, 9 Aug 2012 09:42:07 -0700
Subject: [PATCH] add autocomplete template

---
 edbob/pyramid/templates/autocomplete.mako | 28 +++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 edbob/pyramid/templates/autocomplete.mako

diff --git a/edbob/pyramid/templates/autocomplete.mako b/edbob/pyramid/templates/autocomplete.mako
new file mode 100644
index 0000000..7b09755
--- /dev/null
+++ b/edbob/pyramid/templates/autocomplete.mako
@@ -0,0 +1,28 @@
+<%def name="autocomplete(field_name, field_value, field_display, service_url, width='300px', callback=None)">
+  <div id="${field_name}-container" class="autocomplete-container">
+    ${h.hidden(field_name, id=field_name, value=field_value)}
+    ${h.text(field_name+'-textbox', id=field_name+'-textbox', value=field_display,
+        class_='autocomplete-textbox', style='display: none;' if field_value else '')}
+    <div id="${field_name}-display" class="autocomplete-display"${'' if field_value else ' style="display: none;"'|n}>
+      <span>${field_display}</span>
+      <button type="button" id="${field_name}-change" class="autocomplete-change">Change</button>
+    </div>
+  </div>
+  <script language="javascript" type="text/javascript">
+    $(function() {
+        var autocompleter_${field_name} = $('#${field_name}-textbox').autocomplete({
+            serviceUrl: '${service_url}',
+            width: '${width}',
+            onSelect: function(value, data) {
+                $('#${field_name}').val(data);
+                $('#${field_name}-display span').text(value);
+                $('#${field_name}-textbox').hide();
+                $('#${field_name}-display').show();
+                % if callback:
+                    ${callback}(data, value);
+                % endif
+            },
+        });
+    });
+  </script>
+</%def>