Question

我想在我的网站的下拉列表上方创建一个搜索输入框，介意告诉我如何制作一个可搜索的下拉列表？

echo "<td>";
echo "<select name='customer_name' style='width: 300px;'>";
$sql = mysql_query("select * from master_add where tipe = 'customer'");
while ($r = mysql_fetch_array($sql))
{
    echo "<option value='$r[desc1]'>$r[desc2]</option>";
} 
echo "</select>";
echo "</td>";

Answer 1

您可以尝试silviomoreto/bootstrap-select来构建可搜索的下拉列表。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>

<select class="selectpicker" data-live-search="true">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
</select>

JSFiddle Demo

请参阅https://silviomoreto.github.io/bootstrap-select/examples/#live-search

Answer 2

您有两种解决方案：

PHP - ＆gt;您提交已研究的值并使用它动态创建菜单。如果您的下拉列表非常大，或者如果您在开始时没有打印出所有可能的结果，那就太棒了。
JS - ＆gt;你需要在输入的提交/键盘操作上调用一个函数。然后，您可以像在php（仍然是js样式）中那样重写新菜单，或者隐藏/显示您想要的元素。

然而，由于研究漏洞，您的问题似乎不受欢迎：您不能只问“我该怎么做”，您需要显示使用真实代码，以便我们可以帮助您，而不是为您做到

可搜索的下拉列表

2 个答案: