輸入框列出選擇框的值

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/