如何將列表的功能與文本框結合起來

Question

現在我有一個我在cakephp中創建的表單，它運行良好，但是我遇到的問題是我們在數據庫中運行查詢類型，在拼寫方面出現了一些用戶錯誤，所以我想列出一個可以選擇的最常見類型的列表，但是如果它不在列表中，您仍然可以鍵入不同的內容。

我發現這個jquery自動完成組合框很好用，但我無法輸入不在列表中的東西。 http://jqueryui.com/autocomplete/#combobox

我不知道，如果你需要看到我的形式，或沒有，但我會後也無妨

<?php 

echo $this->Form->create('Credential', array('class' => 'popup_form')); 
echo $this->Form->hidden('account_id', array('value' => $account_id)); 
echo $this->Form->hidden('user_id', array('value' => $currentUser['User']['id'])); 
echo $this->Form->hidden('created', array('value' => date("Y-m-d H:i:s"))); 
echo $this->Form->hidden('modified', array('value' => date("Y-m-d H:i:s"))); 
echo '<br/><br/>'; 
echo $this->Form->input('type', array('div' => false, 'label' => false, 'placeholder' => 'Account Type')); 
echo '<br/><br/>'; 
echo $this->Form->input('url', array('div' => false, 'label' => false, 'placeholder' => 'URL')); 
echo '<br/><br/>'; 
echo $this->Form->input('username', array('div' => false, 'label' => false, 'placeholder' => 'Username')); 
echo '<br/><br/>'; 
echo $this->Form->input('password', array('div' => false, 'label' => false, 'placeholder' => 'Password')); 
echo '<br/><br/>'; 
echo $this->Js->submit('Create Credential', array('div' => false, 'class' => 'button white medium', 'before' => 'return submitForm();', 'success' => "$('#qtip-add_account_credential').hide();", 'complete' => 'loadTasks();')); 
echo '<br/><br/>'; 
echo $this->Form->end(); 
?> 

<script type="text/javascript"> 
    function submitForm(){ 
     var x = document.getElementById("CredentialType").value; 
     if (x == null || x == "") { 
      alert("Account Type must be filled out"); 
      return false; 
     } 
     else { 
      return true; 
     } 
    } 
</script> 

我是一個後端開發人員，他會喜歡任何幫助，我能得到的前端。謝謝。

Answer 1

什麼你正在尋找的是一個數據列表（新的HTML5）：

http://www.w3schools.com/tags/tag_datalist.asp

它提供的選項預定義列表，其中只要用戶輸入相匹配出現的形式輸入其中一個條目。

但：它似乎沒有在Safari

支持在你的情況下，它看起來就像是：

<input name="type" list="AccountTypes" placeholder="Account Type"> 

<datalist id="AccountTypes"> 
    <option value="admin"> 
    <option value="user"> 
    <option value="something else"> 
</datalist>