下拉列表autocomplete各种实现方式比较

Posted MiWang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了下拉列表autocomplete各种实现方式比较相关的知识，希望对你有一定的参考价值。

方法一：用form 表单的datalist属性，此时会以首字母补充排序。实现效果参考：http://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_datalist

<!DOCTYPE html>
<html>
<body>

<form action="action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Internet2 Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>

<p><b>Note:</b> The datalist tag is not supported in Safari or IE9 (and earlier).</p>

</body>
</html>
HTML code

 

 

方法二：用easycomplete，下载地址http://easyautocomplete.com/。实现效果会匹配包含输入字母的所有选项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- Using jQuery with a CDN -->
    <script src="./jquery-2.1.3.min.js"></script>

    <!-- JS file -->
    <script src="./jquery.easy-autocomplete.min.js"></script>

    <!-- CSS file -->
    <link rel="stylesheet" href="./easy-autocomplete.min.css">

    <!-- Additional CSS Themes file - not required-->
    <!--<link rel="stylesheet" href="./easy-autocomplete.themes.min.css">-->


    <script>
        $(document).ready(function () {
            var options = {
                data: ["blue", "green", "pink", "red", "yellow"]
            };
            $("#basics").easyAutocomplete(options);
        })
    </script>
</head>
<body>
<input id="basics"/>
</body>
</html>

 

以上是关于下拉列表autocomplete各种实现方式比较的主要内容，如果未能解决你的问题，请参考以下文章

antd 组件 select 分页懒加载 autocomplete onPopupScroll

将自定义部分添加到 v-autocomplete 下拉列表

以编程方式在 material-ui Autocomplete TextField 中设置值

Google Maps - Autocomplete & Directions API - 触发下拉列表的 onchange()？

选择下拉列表中的复选框后如何清除 v-autocomplete（多个）搜索输入？

winform 程序 如何实现输入文本框 出现下拉数据提示（数据库读取）