如何将列表的功能与文本框结合起来

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

您要搜索的是 datalist（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>