如何以选择形式添加搜索

时间:2019-05-13 10:04:21

标签: javascript html

我希望能够在 select 表单字段中书写或插入搜索字段来查找列表中存在的单词,以便于搜索和这样,我便可以打开所需页面上的链接。 -或可以打开示例中的链接的数据列表。

<select id="1" onchange="window.open(this.value)" name="url">test[/url]
    <option value="#" selected="selected">&#160;&#160;&#160;&#160;&#160;&#160;&#160;- Search -</option>
    <option value="https://www.google.com">google</option>
    <option value="https://www.libero.it/">libero</option>
    <option value="https://stackoverflow.com/">stackoverflow</option>
  </select>

谢谢大家

1 个答案:

答案 0 :(得分:-1)

您可以从GitHub download the select2 release of your choice并将dist目录中的文件复制到您的项目中。

在页面中包含编译后的文件

<link href="path/select2.min.css" rel="stylesheet" />
<script src="path/select2.min.js"></script>

如果您使用任何发行版本,Select2会将其自身注册为jQuery函数,因此您可以在要初始化Select2的任何jQuery选择器上调用.select2()

// In your Javascript (external .js resource or <script> tag)
$(document).ready(function() {
    $('.has-select2').select2();
    // "has-select2" class of your <select>
});
对于您的项目

像这样:

$('select[name="url"]').select2();
<link href="https://select2.org/assets/67d8c795b134371095fa410809f5692f.css" type="text/css" rel="stylesheet" /> 
<!-- import select2 css file -->

<script src="https://select2.org/assets/db8d1316d82fbadb18dde3096cf9e671.js" type="text/javascript"></script>
<!-- import select2 js file -->

<select id="1" onchange="window.open(this.value)" name="url">test[/url]
    <option value="#" selected="selected">&#160;&#160;&#160;&#160;&#160;&#160;&#160;- Search -</option>
    <option value="https://www.google.com">google</option>
    <option value="https://www.libero.it/">libero</option>
    <option value="https://stackoverflow.com/">stackoverflow</option>
</select>