ASP.NET MVC Jquery AutoComplete

最新推荐文章于 2020-03-25 10:35:31 发布

feng1456

最新推荐文章于 2020-03-25 10:35:31 发布

阅读量985

点赞数

分类专栏： ASP.NET MVC 文章标签： jquery autocomplete

本文链接：https://blog.csdn.net/afandaafandaafanda/article/details/46426571

版权

ASP.NET MVC 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

Jquery 有一个非常经典好用的插件-AutoComplete,顾名思义就是自动补全。

今天上手写了一个简单的Demo，复杂的应用也是在此基础上扩展的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Fancy Validate - jQuery UI Autocomplete</title>
    <link href="jquery-ui/css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
    <script src="jquery-1.7.1.min.js"></script>
    <!--<script src="jquery-ui/js/jquery-1.10.2.min.js"></script>-->
    <script src="jquery-ui/js/jquery-ui-1.8.17.custom.min.js"></script>
    <script src="jquery-ui/js/jquery-ui-widget-combobox.js"></script>
    <!--
    <style>
        body {
            font-size: 14px;
        }
        fieldset {
            width: 388px;
            margin: 0 auto;
            text-align: right;
        }
        fieldset div {
            margin: 15px auto;
        }
        .cbo .ui-button-text {
            line-height: 1.3;
            padding-top: 0;
            padding-bottom: 0;
        }
        .cbo .ui-autocomplete-input {
            width: 7.2em;
        }
    </style>
    -->
    <script>
        $(function() {
            
            /* local source autocomplete */
            // 本地字符串数组
            var availableTags = [
			    "C#",
			    "C++",
			    "Java",
			    "JavaScript",
			    "ASP",
                <span style="white-space:pre">	</span>    "ASP.NET",
			    "JSP",
			    "PHP",
			    "Python",
			    "Ruby"
		    ];
            $("#local1").autocomplete({
                source: availableTags,
                select: function (e, ui) {
                    alert("you have selected: ["+ ui.item.value + "] .");
                }
            });
        });
    </script>
</head>
<body>
   <div>
        please input something：ja,sc ...：<input id="local1" type="text" />
   </div>
</body>
</html>

效果：