您的位置：首页 > Web前端 > JQuery

ASP.NET MVC Jquery AutoComplete

2015-06-09 14:39 731 查看
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>


效果：





在做这个Demo的时候遇到一个很让人不爽的事情，使用高版本的jquery(jquery-1.10.2.min.js)时，整个样式乱了，非常苦恼。如果有谁知道如何解决请告知。

资源下载：http://download.csdn.net/detail/afandaafandaafanda/8788443
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航