具有自动建议和自动更新功能的 HTML 下拉菜单答案

【问题标题】：HTML Dropdown menu with autosuggestion and auto updation具有自动建议和自动更新功能的 HTML 下拉菜单
【发布时间】：2016-11-21 18:28:46
【问题描述】：

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

例如-> 目前我的下拉菜单中有“三星”、“索尼”、“苹果”三个选项

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

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

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

。 .

就像它会发生一样。

感谢您的帮助.. :)

【问题讨论】：

select2.github.io

标签： php

【解决方案1】：

最好的解决方案是 select2。 (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>

【讨论】：

感谢它工作正常。但是为什么你只告诉 PHP 是不好的做法呢？
没有。仅 PHP 是不错的做法。我提供的方式有点...取消保存或取消注释，抱歉找不到合适的词

【解决方案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>

【讨论】：