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

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>