                        課程
                    
                        /前端開發(fā)
                        
                            /jQuery
                        
                        /jQuery基礎(chǔ)(五)一Ajax應(yīng)用與常用插件

autocomplete（）？？？

?<!DOCTYPE?html>
<html>
<head?lang="en">
????<meta?charset="utf-8">
????<title>搜索插件</title>
????<style?type="text/css">
????????#divtest
????????{
????????????width:?282px;
????????}
????????#divtest?.title
????????{
????????????padding:?8px;
????????????background-color:?Blue;
????????????color:?#fff;
????????????height:?23px;
????????????line-height:?23px;
????????????font-size:?15px;
????????????font-weight:?bold;
????????}
????????#divtest?.content
????????{
????????????padding:?8px?0px;
????????????background-color:?#fff;
????????????font-size:?13px;
????????}
????????#divtest?.content?.tip
????????{
????????????text-align:center;
????????????border:solid?1px?#ccc;
????????????background-color:#eee;
????????????margin:20px?0px;
????????????padding:8px;
????????????display:none;
????????}
????????.fl
????????{
????????????float:?left;
????????}
????????.fr
????????{
????????????float:?right;
????????}

????</style>
????<link?href="http://idcbgp.cn/data/jquery.autocomplete.css"?rel="stylesheet"?type="text/css"?/>
????<script?type="text/javascript"?src="../js/jquery-1.7.2.min.js"></script>
????<script?src="../js/jquery.min.js"></script>
????<script?src="../js/jquery.autocompleter.min.js"></script>
????<script?type="text/javascript"?src="../js/jquery.autocompleter.js"></script>
????<script?src="../js/main.js"></script>
</head>

<body>
<div?id="divtest">
????<div?class="title">
????????<span?class="fl">搜索插件</span>
????</div>
????<div?class="content">
????????<span?class="fl">用戶名</span><br?/>
????????<input?id="txtSearch"?name="txtSearch"?type="text"?/>
????????<div?class="tip">
????????</div>
????</div>
</div>

<script?type="text/javascript">
????$(function?()?{
????????var?arrUserName?=?["王五",?"劉明",?"李小四",?"劉促明",?"李淵",?"張小三",?"王小明"];
????????$("#txtSearch").autocomplete(arrUserName,{
????????????minChars:?0,?//雙擊空白文本框時(shí)顯示全部提示數(shù)據(jù)
????????????formatItem:?function?(data,?i,?total)?{
????????????????return?"<I>"?+?data[0]?+?"</I>";?//改變匹配數(shù)據(jù)顯示的格式
????????????},
????????????formatMatch:?function?(data,?i,?total)?{
????????????????return?data[0];
????????????},
????????????formatResult:?function?(data)?{
????????????????return?data[0];
????????????}
????????}).result(SearchCallback);
????????function?SearchCallback(event,?data,?formatted)?{
????????????$(".tip").show().html("您的選擇是："?+?(!data???"空"?:?formatted));
????????}
????});
</script>
</body>
</html>?