- The DHX documentation regarding the initialization of dhtmlxCombo is geared towards coders with lots of experience. This tutorial is written to be accessible to beginners.
- This tutorial will walk you through installing dhtmlxCombo with dhtmlxConnector.
- The purpose of this tutorial is to create an autocomplete dynamic drop-down box populated with entries taken from a database.
Preliminary Steps:
- Download dhtmlxCombo
- Unpack the codebase folder from the dhtmlxCombo archive to your server.
- Download dhtmlxConnector
- Unpack the codebase folder from the dhtmlxConnector archive to your server.
- Download this post attachment and replace the original base_connector.php within the codebase folder for this one.
base_connector.zip (5.14 KB) - Create two new .php files (we’ll refer to them as index.php and connect.php)
Explanation:
index.php will generate the drop-down box. dhtmlCombo will populate the select options of the box by running connect.php, asking dhtmlxConnector to grab values from your database.
index.php:
Copy the following code to your index.php. The id of both the div container and the dhtmlXCombo javascript variable must be the same. In this example both ids are combo1.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Combo Box Example</title>
</head><body>
<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlxcombo.css">
<script src="codebase/connector.js" type="text/javascript"></script>
<script src="codebase/dhtmlxcommon.js" type="text/javascript"></script>
<script src="codebase/dhtmlxcombo.js" type="text/javascript"></script>
<script src="codebase/ext/dhtmlxcombo_extra.js" type="text/javascript"></script>
<script>window.dhx_globalImgPath="codebase/imgs/";</script>
<!------------------------------------------>
<!----------Create the combo box------------>
<div id="combo1" style="width:200px; height:30px;">
<script>
var z=new dhtmlXCombo("combo1","person",200);
z.enableFilteringMode(true,"connect.php",true);
function confirmComboValue(){
combo.confirmValue();
}
</script>
</div>
<!-------------End the combo box------------>
<!------------------------------------------>
</body>
</html>connect.php:
Copy the following code to a blank connect.php. Replace these values with your own.
- LOCALHOST - This is the address to your database. If remote check with your host. If local, leave it as localhost or 127.0.0.1.
- ROOT - This is the username of the user that will be connecting to your database.
- MYDATABASE - This is the name of the database that you to connect to.
- TABLE - This is the name of the table within the database that you connect to.
- FIELD - The field from which you will obtain values. You can get values from other fields with a comma.
<?php
require("codebase/combo_connector.php");
$res=mysql_connect("LOCALHOST","ROOT","");
mysql_select_db("MYDATABASE");
$comboconn = new ComboConnector($res,"MySQL");
$comboconn->render_table("TABLE","FIELD1","FIELD2","FIELD3");
?>Moderators: Please sticky this post for easy access.