Question

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

<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>

现在，＆＃34;名称搜索＆＃34;栏和下拉菜单的ID为"sp_name"。

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

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

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

enter image description here

因此，您可以选择输入名称，也可以从一个单一栏中选择其中一个。

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

我怎样才能做到这一点？

Answer 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>

Answer 2

您可以改用HTML5 datalist。

将下拉选项放在输入栏中

2 个答案: