[Tutorial]Installing dhtmlxCombo and Connector

  • 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.

Hello,

great! Thank you for sharing your experience.

There are some remarks…

  • You wrote in details for attachment “An updated base_connector.php for dhtmlxConnector to resolve a few issues between dhtmlx components and php integration.” What issues did you mean ?
  • It seems that confirmComboValue() doesn’t relate the sample. Am I right?

confirmComboValue() was added in the tutorial because in this doc page it is described how a value may not be sent without confirmComboValue() if the form is submitted before losing focus.

Stanislav prepared this updated base_connector.php in this thread. I am not sure what was changed, but it solved connection issues for another user so I included it, just in case.

hi there…
how to do this with asp.net? any tutorial on it too?

Hi,

Please see connector documetation:
docs.dhtmlx.com/doku.php?id=dhtm … xconnector
and samples in connector package.

Thanks for example,
But several doubts arise,
In the index.php
The script is targeting codebase
But which refers to the combo or the connector
Since the decompress combo and connector have similar files, so I put them in different folders or should I mix them?

In the server side code, “codebase” reffers to DHTMLXConnector package