Difference between revisions of "Code Library/ComboBox"
(back link) |
(minor rework) |
||
| Line 1: | Line 1: | ||
'''Find and manipulate database content with AJAX''' | '''Find and manipulate database content with AJAX''' | ||
| − | If a select box contains many values from a database table it is often not acceptable to display them all. Either it may take a long time until the user will find the entries he is searching for or the load on the database or network might be too high. In this cases | + | If a select box contains many values from a database table it is often not acceptable to display them all. Either it may take a long time until the user will find the entries he is searching for or the load on the database or network might be too high. In this cases a combo box can ease your pain by dynamically retrieving entries from a database based on the string the user has entered. |
== Example == | == Example == | ||
| − | Type in one or more characters and click on the magnifying glass. The | + | Type in one or more characters and click on the magnifying glass. The combo box will contain all matches which contains the string: |
<html> | <html> | ||
<iframe src="http://linuxnetworks.de/codelib/combobox/combobox.html" style="width: 75%; height: 3em; border: none; margin-top: 1em;"> | <iframe src="http://linuxnetworks.de/codelib/combobox/combobox.html" style="width: 75%; height: 3em; border: none; margin-top: 1em;"> | ||
| − | Your browser does not support frames or is currently configured not to display frames. However, you may visit the | + | Your browser does not support frames or is currently configured not to display frames. However, you may visit the http://linuxnetworks.de/codelib/combobox/combobox.html directly |
</iframe> | </iframe> | ||
</html> | </html> | ||
| − | The | + | The combo box won't ask the server while you're typing because this may cause performance problems sooner or later. If you have many visitors using this functionality at the same time, it would generate a high load on your database server because of the requests sent to the server after typing in a character each time. |
| − | The edit, add and delete buttons will give you an impression of what is possible. Due to the stateless nature of the script behind (the | + | The edit, add and delete buttons will give you an impression of what is possible. Due to the stateless nature of the script behind (the entries won't be stored in a database or something like that) accessing newly added combo box values is only possible once. The changes are lost as soon as the list is reloaded by any action. |
== Code == | == Code == | ||
| − | The | + | The combo box code is based on the AJAX code of the [http://prototype.conio.net/ Prototype library] and you need both to get it to work. |
* [http://www.linuxnetworks.de/codelib/combobox/combobox.txt HTML code snippet] | * [http://www.linuxnetworks.de/codelib/combobox/combobox.txt HTML code snippet] | ||
| Line 27: | Line 27: | ||
== License == | == License == | ||
| − | The | + | The combo box code is freely available and distributable under the terms of the BSD license. You can use it in any project (even commercial ones) as long as you list the authors of the combo box. |
The icons used above are part of the KDE Crystal Theme. Thanks to the KDE Artists for this nice piece of work. | The icons used above are part of the KDE Crystal Theme. Thanks to the KDE Artists for this nice piece of work. | ||
Revision as of 22:15, 21 April 2007
Find and manipulate database content with AJAX
If a select box contains many values from a database table it is often not acceptable to display them all. Either it may take a long time until the user will find the entries he is searching for or the load on the database or network might be too high. In this cases a combo box can ease your pain by dynamically retrieving entries from a database based on the string the user has entered.
Example
Type in one or more characters and click on the magnifying glass. The combo box will contain all matches which contains the string:
The combo box won't ask the server while you're typing because this may cause performance problems sooner or later. If you have many visitors using this functionality at the same time, it would generate a high load on your database server because of the requests sent to the server after typing in a character each time.
The edit, add and delete buttons will give you an impression of what is possible. Due to the stateless nature of the script behind (the entries won't be stored in a database or something like that) accessing newly added combo box values is only possible once. The changes are lost as soon as the list is reloaded by any action.
Code
The combo box code is based on the AJAX code of the Prototype library and you need both to get it to work.
License
The combo box code is freely available and distributable under the terms of the BSD license. You can use it in any project (even commercial ones) as long as you list the authors of the combo box.
The icons used above are part of the KDE Crystal Theme. Thanks to the KDE Artists for this nice piece of work.
Back to Overview
