I have implemented a first working version of an autocomplete controller
that might be useful for others, too:

http://qooxdoo-contrib.svn.sourceforge.net/viewvc/qooxdoo-contrib/trunk/qooxdoo-contrib/qcl/trunk/source/class/qcl/data/controller/AutoComplete.js?revision=20050&view=markup

See explanation from the API doc below.

Unfortunately, I have no time to create a contribution from it with a demo,
but here is a screenshot what you can do with it:

http://n2.nabble.com/forum/FileDownload.jtp?type=n&id=4991551&name=Bild_1.png 

As you can see from the screenshot, autocomplete works not only in a
single-value mode, but can also be used when there are several values in a
field, separated by certain characters (such as new line in the shown text
area).

I will keep on polishing the class, but it works a expected for the moment.

Cheers,
Christian

----

Adds autocompletion to a widget that allows entering values.
Currently, qx.ui.form.(TextField|TextArea|ComboBox) are supported.

The model is a qx.core.object marshalled from json data (using, for example
qx.data.marshal.Json.create() ), with the following structure:

{ "input" : "fragment",
  "suggestions" :
["fragment","fragmentation","fragmentabolous","fragmentive",...]
}

The "input" property contains the input fragment to match, the suggestions
are an 
array of values that match the input fragment. Usually, the model would be 
marshalled from data received by the server. Most conveniently, you can
connect
the controller qith a qc.data.store.Json (see below).

Autocompletion is not limited to single-value fields, i.e. fields that
contain
only one value. You can also use separators such as semicolon, comma or
newline
to use autocomplete for the individual values. For example, in the "TO"
field
of an email client, you can use autocomplete for each email address, without
having
to use several separate text fields. 

Code examples:

Autocomplete with a single-value ComboBox

  var store = new qcl.data.store.JsonRpc(null, "my.service");
  store.setAutoLoadMethod("myAutoCompleteValuesMethod");
  var combobox = new qx.ui.form.ComboBox();
  var controller = new qcl.data.controller.AutoComplete(null,combobox);
  controller.bind("input", store, "autoLoadParams",{
    'converter' : function( input ){ return input ? ["param1", "param2",
"param3", input] : null } 
  });
  store.bind("model", controller,"model");


Autocomplete with a multi-valued TextField which contains values separated
by a semicolon (";"). In the database backend, values are also separated by 
";" in the database column data:

  var store = new qcl.data.store.JsonRpc(null, "my.service");
  store.setAutoLoadMethod("myAutoCompleteValuesMethod");
  var textfield = new qx.ui.form.TextField();
  var controller = new qcl.data.controller.AutoComplete(null,textfield,
";",true);
  controller.bind("input", store, "autoLoadParams",{
    'converter' : function( input ){ return input ? ["param1", "param2",
"param3", input, ';' ] : null } 
  });
  store.bind("model", controller,"model");

Autocomplete with a multi-valued TextArea which contains values separated
by newline. In the database backend, values are separated by ";" in the
database column data:

  var store = new qcl.data.store.JsonRpc(null, "my.service");
  store.setAutoLoadMethod("myAutoCompleteValuesMethod");
  var textarea = new qx.ui.form.TextArea();
  var controller = new qcl.data.controller.AutoComplete(null,textarea,"\n");
  controller.bind("input", store, "autoLoadParams",{
    'converter' : function( input ){ return input ? ["param1", "param2",
"param3", input, ';' ] : null } 
  });
  store.bind("model", controller,"model");

-- 
View this message in context: 
http://qooxdoo.678.n2.nabble.com/Autocomplete-controller-beta-ready-tp4991551p4991551.html
Sent from the qooxdoo mailing list archive at Nabble.com.

------------------------------------------------------------------------------
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

Reply via email to