Scripty2 and AJAX autocompleter

written by seb on September 3rd, 2010 @ 03:19 PM

As of today, September 3rd 2010, scripty2 is still in alpha release and the autocompleter as experimental implementation. Anyway, I feel it stable enough for my current needs and just needed few tweaks to get it working as expected with AJAX support.

NOTICE: Development made for BookingSync

What new features I needed

  • My choices are coming from an AJAX request, returning a JSON formatted array of objects.
  • The list's items need to be more verbose, showing more that one attribute of each object and with custom HTML schema.
  • Once a choice selected, I need access to the corresponding object ID to get more details on this object.

New options introduced

  • choiceAttribute: If defined, the search will occur against this object attribute, and once selected will set only this attribute back as input value. (eg. The complete object is returned as meno's value of the fired event ui:autocompleter:selected)
  • listTemplate: If defined, the list items will use this template to update them content. It will be evaluated with the following arguments:
    • text: the value defined by object[choiceAttribute], potentially highlighted
    • object: the complete object

Usage example


<span id="autocompleter2">
  <input type="text" name="firstname" />
</span>

<script type="text/javascript">
  // That's where you want to get the choices with an AJAX request
  var choices = [
    { client: { login: "madrobby", name: "Thomas Fuchs"} },
    { client: { login: "savetheclocktower", name: "Andrew Dupont"} },
    { client: { login: "ZenCocoon", name: "Sébastien Grosjean"} },
    ...
  ];

  new S2.UI.Autocompleter('autocompleter2', {
    choices: choices.collect(function(o) { return o.client }),
    choiceAttribute: 'name',
    listTemplate: new Template('#{text} <em>(#{object.login})</em>')
  });
</script>

Live demo visible at Scripty2 functional test at ZenCocoon.com

Production usage coming to BookingSync's booking creation to prevent dual client creation

Patch

The patch can be found at http://github.com/ZenCocoon/scripty2

posted in:

comments are closed

0 comments

Comments are closed