Javascript 如何将列表的功能与文本框相结合

现在我有一个用cakephp创建的表单，它运行得很好，但我遇到的问题是，我们在数据库中运行了该类型的查询，并且出现了一些用户拼写错误，所以我希望有一个包含最常见类型的列表，您可以从中选择，但如果它不在列表中，您仍然可以键入有些不同

我发现这个jquery自动完成组合框非常有效，但我无法输入列表中没有的内容

我不知道你是否需要看我的表格，但我还是会贴出来的

<?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>

---

您正在搜索的是一个数据列表（HTML5中新增）：


它提供了一个带有预定义选项列表的表单输入，一旦用户的输入与其中一个条目匹配，就会立即显示该列表

但：Safari中似乎不支持它

在您的情况下，它看起来是这样的：

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

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

谢谢，这比我想象的要简单。我想我必须用javascript来完成它。