带有按钮的可编辑组合框以显示弹出窗口答案

【问题标题】：Editable Combobox with button to show popup带有按钮的可编辑组合框以显示弹出窗口
【发布时间】：2016-04-07 18:14:35
【问题描述】：

我需要可编辑的选择框，以便用户可以手动输入并从可用选项列表中进行选择。我所拥有的是带有按钮的下拉菜单以打开弹出窗口，但除此之外我还需要手动输入框。

让我们看看它的样子

所以现在我只能下拉选择列表并打开打开弹出窗口，但那里没有可编辑的输入框。

我也在分享代码和小提琴

<div class="grid-33">
              <label class="b-control">
                <span class="b-control__label">Source:</span>
                <span class="b-control__editable">
                  <select class="b-control__select">
                    <option value=""></option>
                    <option value="">...</option>
                    <option value="">...</option>
                    <option value="">...</option>
                  </select>
                  <a class="b-control__edit js-control__edit js-popupLink" href="#js-editSelect">...</a>
                </span>
              </label>
            </div>

https://jsfiddle.net/mahendrakawde/o4j3x495/

玩。帮助我在小提琴中使用这个 css 和 js 进行可编辑的选择。

【问题讨论】：

你要求在模型窗口中输入的Name和Seq#的作用是什么？
Name 将是新选项，将被添加到下拉列表中，seq# 将是自动生成的编号。但我不关心它。我只需要输入框元素
@Siddharth 我只需要在按钮前面有一个显示弹出窗口的输入框，其余的将由 js 管理
可以加一张你想要的图吗？
如果您不需要支持 Safari，那么您可以使用带有数据列表的普通输入，并且处理回车键应该可以轻松完成工作。在这里查看演示——jsfiddle.net/abhitalks/tg3pxk8x

标签： javascript jquery html select drop-down-menu

【解决方案1】：

朋友，我已经尝试过使用 CSS 的东西，但我不太确定我使用的方法，如果它适合你，那就很好。请看fiddle

<input class="edit_text" type="text"/>

和相应的CSS

.edit_text{
  cursor: pointer;
  display: block;
  height: 34px;
  position: absolute;
  top: 35px;
  width: 246px;
  z-index: 999;
}

我已经引入了一个外部输入，然后尝试覆盖它现有的选择，看起来工作正常，现在您可以添加事件到输入以在选择标签项中进行搜索等等，基本上您可以使用该输入标签做任何您想做的事情.

【讨论】：

当我将它添加到整个页面时，这不起作用。对于单个元素，它确实有效。
你能推荐一下带有按钮的可编辑下拉菜单吗？
你需要在添加到整个页面时更改css，它应该可以工作，只需根据可用情况更改css的顶部元素即可。你检查了吗chosen
通过更改 CSS 会弄乱我的整个页面。我看到选择了，但我的问题是我还需要在 select 中使用按钮来调用 poup
你能不能把你正在处理的页面弄乱，没有什么是乱七八糟的，你需要应用正确的规则。