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

Jquery AutoComplete的使用方法实例

2013-09-23 19:31 465 查看 
<scriptsrc="http://code.jquery.com/jquery-1.9.1.js"></script>
<scriptsrc="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<linkrel="stylesheet"href="/resources/demos/style.css"/>
<script>
$(function(){
varavailableTags=[
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#tags").autocomplete({
source:availableTags
});
});
</script>
</head>
<body>
<divclass="ui-widget">
<labelfor="tags">Tags:</label>
<inputid="tags"/>
</div>
一个稍微复杂的例子，可以自定义提示列表:
CodehighlightingproducedbyActiproCodeHighlighter(freeware)http://www.CodeHighlighter.com/-->1<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>自定义提示</title>
<scripttype="text/javascript"src="/js/jquery-1.4.2.min.js"></script>
<scripttype="text/javascript"src="/js/jquery.autocomplete.min.js"></script>
<linkrel="Stylesheet"href="/js/jquery.autocomplete.css"/>
<scripttype="text/javascript">
varemails=[
{name:"PeterPan",to:"peter@pan.de"},
{name:"Molly",to:"molly@yahoo.com"},
{name:"ForneriaMarconi",to:"live@japan.jp"},
{name:"Master<em>Sync</em>",to:"205bw@samsung.com"},
{name:"Dr.<strong>Tech</strong>deLog",to:"g15@logitech.com"},
{name:"DonCorleone",to:"don@vegas.com"},
{name:"McChick",to:"info@donalds.org"},
{name:"DonnieDarko",to:"dd@timeshift.info"},
{name:"QuakeTheNet",to:"webmaster@quakenet.org"},
{name:"Dr.Write",to:"write@writable.com"},
{name:"GGBond",to:"Bond@qq.com"},
{name:"ZhuzhuXia",to:"zhuzhu@qq.com"}
];

$(function(){
$('#keyword').autocomplete(emails,{
max:12,//列表里的条目数
minChars:0,//自动完成激活之前填入的最小字符
width:400,//提示的宽度，溢出隐藏
scrollHeight:300,//提示的高度，溢出显示滚动条
matchContains:true,//包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
autoFill:false,//自动填充
formatItem:function(row,i,max){
returni+'/'+max+':"'+row.name+'"['+row.to+']';
},
formatMatch:function(row,i,max){
returnrow.name+row.to;
},
formatResult:function(row){
returnrow.to;
}
}).result(function(event,row,formatted){
alert(row.to);
});
});
</script>
</head>
<body>
<formid="form1"runat="server">
<div>
<inputid="keyword"/>
<inputid="getValue"value="GetValue"type="button"/>
</div>
</form>
</body>
</html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航