带有自动提示和自动更新的HTML下拉菜单

Question

我正在尝试开发基于html，css的网页。我使用PHP进行服务器端脚本编写。 我想要一个带有可用选项的下拉菜单，但同时我需要这个下拉列表来接受文本。所以我也可以从文本框中选择下拉列表，无论我想要什么。 我找到了上述方案的一个解决方案并且工作正常，但是我想要的更多，一旦我在文本框中写了一些东西，这不是下拉列表的选项，从下次它将自动包含它。

e.g。 - ＆GT; 目前我的下拉列表有三个选项“三星”，“索尼”，“苹果”

<option value="one">Samsung</option>
<option value="two">Sony</option>
<option value="three">Apple</option>

现在，“Lenevo”不可用。对于文本框中的第一次，我会将“Lenevo”作为我的选择，然后将其包含在下拉菜单中。

<option value="one">Samsung</option>
<option value="two">Sony</option>
<option value="three">Apple</option>
<option value="four">Lenevo</option>

。

就像它会发生的那样。

感谢您的帮助.. :)

Answer 1

最好的解决方案就是选择2。 （JavaScript的）

例如，请查看此处：Link

如果您只想使用PHP，则需要提供from来提交文本值：

（免责声明：这个解决方案是非常糟糕的做法。但它是一个如何在低级别上解决它的例子。）

1）提供表格

<input type="text" name="addSelection">

2）阅读帖子请求

$newOption = $_POST["addSelection"];

3）在某处保留新选项（此处为Session，也可能是数据库）

$_SESSION["additionalOptions"][] = $newOption;

4）与标准选项合并

$options = ["apple","banana"];
$options = array_merge($options,$_SESSION["additionalOptions"]);

5）在HTML中创建选项

<select name="fruits">
    <?php
        foreach($options as $option){
            echo '<option value="'+$option+'">'+$option+'</option>';

        }
    ?>
</select>

Answer 2

使用select2插件 https://github.com/select2/select2

<script type="text/javascript" src="/assets/profile/js/select2.min.fda43621.js"></script>

var validateTag = function (term, data) {
    var value = term.term;
    var re = /^[a-z\d\-_\s]+$/i;
    if (re.test(value))) {
        return {
            id: value,
            text: value
        };
    }
    return 'wrong_characters';
};
$("#selectAlt").select2({tags: true, maximumSelectionLength: 6, maximumInputLength: 20, createTag: validateTag});

HTML：

<select name="selectAlt[]" id="selectAlt" multiple="multiple" custom-placeholder="Genre">
<option    value="Blues">Blues</option>                                
<option    value="Classic Rock">Classic Rock</option>                                
<option    value="Country">Country</option>
</select>