所以，我有一个搜索栏和下拉菜单:
<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>
<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>
关于css - 将下拉选项放在输入栏中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31132459/