【IT168技术文档】

  一、Search Suggest（模仿Google Suggest）

  这个例子的样式完全模拟了Google Suggest。

  首先是HTML，在这个网页中，只存在一个id为searchTextBox的文本框。代码如下：

<atlas:ScriptManager ID="ScriptManager1" runat="server" />
<input id="searchTextBox" type="text" style="width:300px;"/>

  然后提供一个div作为AutoCompleteBehavior的Completion List（可选，如果不提供，AutoCompleteBehavior会自己创建一个），并且创建一个div作为提示每一项的模版。代码如下：

<div id="itemTemplate" style="padding:3px; clear:both; height:13px;">
<div id="lblKeyword" class="keyword" style="float:left; width:200px; overflow:hidden;"></div>
<div style="font-size:10px; float:right;" class="result">
<span id="lblResult"></span>
<span>&nbsp;results</span>
</div>
</div>

  可以看到，在这里，我使用了大量内嵌的 style，这不是一个好的Practice，不过我在这里是为了使用最简的方法来为模版中“不变”的样式设值。在这里可以看到，在每一项内部，有一个 <div />浮动在最左，用于显示提示用自动补全的词，还有一个<div />浮动在最右，用来显示结果数量。

  然后就是我们使用的Style：

<style type="text/css">
body, input { font-family:Arial; font-size:12px; }
.completionListClass { border: solid 1px #CCCCCC; cursor:default; }
.itemClass { background-color:white; }
.itemClass .keyword { color:black; }
.itemClass .result { color:green; }
.highlightedItemClass { background-color:blue; }
.highlightedItemClass .keyword { color:white; }
.highlightedItemClass .result { color:white; }
</style>

  可以看到，我们使用了嵌套的CSS Class，例如，定义了模版某一项的CSS Class为itemClass，那么class被设为result的span，其color值就会被设成green。

  最后就是最重要的Atlas Xml Scripts：