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>

如何将列表的功能与文本框组合在一起

1 个答案: