如何创建可搜索的下拉菜单？
Posted
技术标签:
【中文标题】如何创建可搜索的下拉菜单？【英文标题】：How to create a searchable drop down? 【发布时间】：2020-06-23 09:48:23 【问题描述】：我有一个很长的值列表，我希望通过一个下拉菜单来选择这些值，该下拉菜单可以通过将值键入为文本来搜索项目。例如，类似于www.google.com 中的搜索框... 我如何使用jQuery、javascript、html 和bootstrap 做到这一点？有捷径吗？
给下面的razor view代码加个类就够了吗？
@Html.DropDownListFor(m => m.MyProperty, fmDataContext.MySelectList, "Select...", new @class = "form-control" )
这只会呈现一个正常的下拉菜单，而不是我想要的。
【问题讨论】：
你可以使用jquery自动完成 @JDias - 您如何看待使用 datalist HTML 元素的解决方案..？ jquery 自动完成的问题在于它实际上是另一个包中的另一个：jQueryUI... bootstrap 可能吗？
【参考方案1】：
此类任务的一个可能解决方案是带有 datalist 元素的简单 HTML 代码：
<form>
<label for="properties">Properties</label>
<input name="properties" id="properties" list="properties-list">
</form>
<datalist id="properties-list">
<option>Property 1</option>
<option>Property 2</option>
<option>Property 3</option>
</datalist>
【讨论】：
这个解决方案令人满意。但是，它只允许通过输入字符串的第一部分进行搜索，即，如果我输入，比如说“ty 3”，它不会显示任何要选择的项目……另外，这需要在提交时进行验证以不允许用户输入任何字符串。 @JDias - 在这种情况下，您应该使用现有的 JS 库之一 - 例如 tarekraafat.github.io/autoComplete.js 或 leaverou.github.io/awesomplete【参考方案2】：关于您的要求，我有一个使用jQuery 插件MagicSearch 的示例演示。我创建的两个列表（idList 和nameList）是id 和name，每个元素连接在一个逗号分隔的字符串中。一旦你有了这个字符串，你就可以根据你的要求提取出所需的信息。您可以根据需要定制插件 UI。这个插件接受了一个JSON 对象，如下所示，您可以在文档中阅读有关回调函数的更多信息。
工作演示：https://jsfiddle.net/pomygbk8/
<html lang="en">
<head>
<title>Search for keywords</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/magicsearch@1.0.4/examples/css/normalize.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/magicsearch@1.0.4/examples/css/style.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/magicsearch@1.0.4/src/sass/jquery.magicsearch.scss" rel="stylesheet">
</head>
<body class="theme2">
<div id="container">
<h2>Search for keywords</h2>
<section>
<input class="magicsearch" id="basic" placeholder="search keywords">
</section>
<br />
<input id="btnSearch" type="button" value="Submit" class="btn btn-primary btn-sm" />
</div>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/magicsearch@1.0.4/src/js/jquery.magicsearch.js"></script>
<script>
var idList="";
var nameList = "";
$(function ()
var dataSource = "[\"id\":1,\"name\":\"test\",
\"id\":2,\"name\":\"example\",\"id\":3,\"name\":\"image\",
\"id\":4,\"name\":\"election\",\"id\":5,\"name\":\"IPL\",
\"id\":6,\"name\":\"Fashion\",\"id\":7,\"name\":\"Movies\",
\"id\":8,\"name\":\"Pollution\",\"id\":9,\"name\":\"Modi\",
\"id\":10,\"name\":\"Rahul\",\"id\":11,\"name\":\"Cricket\",
\"id\":12,\"name\":\"Market\",\"id\":13,\"name\":\"TestKeyword\",
\"id\":14,\"name\":\"testkeyword1\",\"id\":15,\"name\":\"testkeyword2\",
\"id\":16,\"name\":\"testkeyword3\"]";
$('#basic').magicsearch(
dataSource: dataSource,
fields: ['name'],
id: 'id',
format: '%name%',
hidden: true,
multiple: true,
focusShow: true,
isClear: true,
multiField: 'name',
multiStyle:
space: 5,
width: 200
,
success: function ($input, data)
idList = idList + data.id + ',';
nameList = nameList + data.name + ',';
// alert(data.id);
return true;
,
afterDelete: function ($input, data)
idList = idList.replace(data.id + ',', "");
nameList = nameList.replace(data.name + ',',"");
//alert(data.id);
return true;
);
);
</script>
</body>
</html>
【讨论】：
以上是关于如何创建可搜索的下拉菜单？的主要内容，如果未能解决你的问题，请参考以下文章