Question

当我在输入文本中键入文本（例如：汽车）时，有人可以帮我找到方法，并且汽车名称（宝马，雪佛兰等）列在选择框中。

有人有想法或例子吗？

Answer 1

jQuery UI有一个自动完成模块：

http://jqueryui.com/demos/autocomplete/

Answer 2

如果您熟悉jQuery和Ajax，则可以非常简单地执行此操作。您可以观看文本框的输入，并在达到您满意的阶段后触发Ajax请求。返回Ajax查询用于填充下拉框。

以下是实践中的一个例子。您需要在服务器上安装jquery，或者引用CDN中保存的副本（例如Google）。为了保护无辜，我不得不对它进行一些编辑，但是如果有更多的线条它就可以正常工作。

您需要自己弄清楚的唯一项目，它应该通过什么方式调用Ajax，因此填充下拉列表。我已经在这么多角色之后使用它，一旦识别出文本模式，以及一个胡扯事件。选择是你的。

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

?>

列出选择框值的输入框

2 个答案: