输入框列出选择框的值

Question

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

做一些人有一个想法或例子？

Answer 1

如果您熟悉使用jQuery和Ajax，这可以非常简单地进行。您可以观看文本框的输入，并在达到您满意的阶段时触发Ajax请求。 Ajax查询的返回是它们用于填充下拉框。

下面是一个在实践中的例子。你需要在你的服务器上有jQuery，或者引用CDN中的副本（如Google）。为了保护无辜者，我不得不编辑它，但是有更多的线条可以正常工作。

您需要弄清楚自己的唯一项目，它应该通过什么方式调用Ajax，因此可以填充下拉列表。我已经在很多角色之后使用过它，一旦识别出了文字图案，并且还有一个hoover off事件。这是你的选择。

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代码

<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 

?> 

Answer 2

jQuery用户界面具有自动完成模块：

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