Question

Can someone help me find a way when i type a text in an Input text (eg: cars ), and the name of cars (bmw, Chevrolet, etc..) is listed in a select box.

do some one have an idea or an example?

Answer 1

If you are familiar with jQuery and Ajax, this can be performed very simply. You watch the input of the text box and fire off an Ajax request once it reaches a stage you are happy with. The return of the Ajax query is them used to populate a drop down box.

Below is an example of this in practice. You’ll need to either have jquery on your server, or reference a copy held within a CDN (such as Google). I’ve had to edit it a bit in order to protect the innocent, but with a couple of more lines it’ll work fine.

The only item you’ll need to figure out yourself, it by what means should Ajax be called and therefore your drop down list be populated. I’ve used it after so many characters, once a text pattern has been recognised, and as well as a hoover off event. The choice is yours.

JAVASCRIPT

<script language="JavaScript" src="./js.jquery.inc.js"></script>
<script language="JavaScript" type="text/javascript">

        // This is the pure ajax call, needs some way of being called.
        $.ajax({
            url: "ajaxCode.php",
            cache: false,
            type: "POST",
            data: ({carID : $("#CARS").val()}),
            dataType: "xml",
            success: function(data){
                populateCars(data);
            },
            error: function(data){
                // Something in here to denote an error.
                alert("Error no cars retrieved.");
            }
        });


        function populateCars(data)
        {
            $(data).find("node").each(function()
            {
                var carStr = $(this).find("String").text()
                var carKey = $(this).find("Key").text()
                $("<option value='"+carKey+"'>"+carStr+"</option>").appendTo("#CARSLOOKUP");
            });
        }
 </script>

HTML CODE

<input type="text" id="CARS" value="" >
<select id="CARSLOOKUP">
</select> 

AJAXCODE.PHP CODE

<?php
    // Post code will come in as a POST variable!
    $carCode = $_POST['carID'];

    // Need to build up an array of cars to return, based upon the example below.
    // Preferably based upon the input given within the car code variable.
    foreach($carList as $cars)
    {

        $returnArray[] = array("Key" => "Vectra", "String" => "Vauxhall Vectra");
    }


    // Output the headers and data required.
    header('Cache-Control: no-cache, must-revalidate');
    header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
    header('Content-type: application/xml');

    // This simply converts the array and returns formatted XML data (functions listed below).
    $xml = new array2xml('cars');
    $xml->createNode($returnArray);
    echo $xml;

    exit(0);

    class array2xml extends DomDocument
    {

        public $nodeName;

        private $xpath;

        private $root;

        private $node_name;


        /**
        * Constructor, duh
        *
        * Set up the DOM environment
        *
        * @param    string    $root        The name of the root node
        * @param    string    $nod_name    The name numeric keys are called
        *
        */
        public function __construct($root='root', $node_name='node')
        {
            parent::__construct();

            /*** set the encoding ***/
            $this->encoding = "ISO-8859-1";

            /*** format the output ***/
            $this->formatOutput = true;

            /*** set the node names ***/
            $this->node_name = $node_name;

            /*** create the root element ***/
            $this->root = $this->appendChild($this->createElement( $root ));

            $this->xpath = new DomXPath($this);
        }

        /*
        * creates the XML representation of the array
        *
        * @access    public
        * @param    array    $arr    The array to convert
        * @aparam    string    $node    The name given to child nodes when recursing
        *
        */
        public function createNode( $arr, $node = null)
        {
            if (is_null($node))
            {
                $node = $this->root;
            }
            foreach($arr as $element => $value) 
            {
                $element = is_numeric( $element ) ? $this->node_name : $element;

                $child = $this->createElement($element, (is_array($value) ? null : $value));
                $node->appendChild($child);

                if (is_array($value))
                {
                    self::createNode($value, $child);
                }
            }
        }
        /*
        * Return the generated XML as a string
        *
        * @access    public
        * @return    string
        *
        */
        public function __toString()
        {
            return $this->saveXML();
        }

        /*
        * array2xml::query() - perform an XPath query on the XML representation of the array
        * @param str $query - query to perform
        * @return mixed
        */
        public function query($query)
        {
            return $this->xpath->evaluate($query);
        }

    } // end of class

?>