在输入栏中放置下拉选项答案

【问题标题】：Putting dropdown option in input bar在输入栏中放置下拉选项
【发布时间】：2015-09-16 21:45:49
【问题描述】：

所以，我有一个搜索栏和下拉菜单：

<input placeholder="Name Search" name="sp_name" id="sp_name" class="btn-block"/>    
<input type="submit" id="sp_search_submit" class="btn" value="Search">

和

<select name="sp_name" id="sp_name" class="input-small btn-block">                              
    <option value="" type="text"><?php _e('All Names', 'my_site') ?></option>
    <option value="Steve" <?php selected('Steve', isset($_GET['sp_name']) ? $_GET['sp_name'] : ''); ?>>Steve</option>
    <option value="Mike" <?php selected('Mike', isset($_GET['sp_name']) ? $_GET['sp_name'] : ''); ?>>Mike</option>
    <option value="Sean" <?php selected('Sean', isset($_GET['sp_name']) ? $_GET['sp_name'] : ''); ?>>Sean</option>
</select>

现在，“名称搜索”栏和下拉菜单都有相同的 ID 为 "sp_name"。

换句话说，您将通过输入名称或选择其中一个选项来获得结果。

然而，这是两个独立的部分，它占用了如下图所示的空间。

我正在尝试将下拉菜单添加为输入搜索栏的一部分，如下所示。

因此，您可以选择键入名称或从单个栏中的选项中进行选择。

我尝试将<input> 作为<select> 选项之一，但没有成功。

我怎样才能做到这一点？

【问题讨论】：

“名称搜索栏和下拉菜单”。无论版本如何，这都不是有效的 HTML。任何 ID 必须是唯一标识符。但是，它们可以具有相同的名称，但这会导致有趣的副作用。

标签： css autocomplete

【解决方案1】：

试试这个；

您可以使用以下参考：

Jquery Autocomplete Combobox

Kendo Autocomplete Combobox

<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/autocomplete/index">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.material.min.css" />
    <script src="http://cdn.kendostatic.com/2015.2.624/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
</head>
<body>
<select id="Soptions" style="visibility: hidden">                              
  <option value="Steve" <?php selected('Steve', isset($_GET['sp_name']) ? $_GET['sp_name'] : ''); ?>Steve</option>
  <option value="Mike" <?php selected('Mike', isset($_GET['sp_name']) ? $_GET['sp_name'] : ''); ?>Mike</option>
  <option value="Sean" <?php selected('Sean', isset($_GET['sp_name']) ? $_GET['sp_name'] : ''); ?>Sean</option>
</select>
<script type="text/javascript">
var texts = [];
var sel = document.getElementById('Soptions');
for (var i=0, n=sel.options.length;i<n;i++) {
  if (sel.options[i].text) texts.push(sel.options[i].text);
}
</script>
        <div id="example">
            <div>
                <h4>Choose User Name:</h4>
                <input id="User" style="width: 25%;" />
            </div>
            <script>
                $(document).ready(function () {
                    $("#User").kendoAutoComplete({
                        dataSource: texts,
                        filter: "startswith",
                        placeholder: "Select Name...",
                        separator: " "
                    });
                });
            </script>
        </div>
</body>
</html>

【讨论】：

我喜欢 jQuery 自动完成功能，但我只是想知道您是否知道浏览器的兼容性。
@steveKim Mozilla firefox 更具兼容性。你也可以使用谷歌浏览器。

【解决方案2】：

您可以改用 HTML5 datalist。

【讨论】：

你能举个例子吗？