什么是Autocomplete效果，我们经常可以在google搜索时看到：

输入某几个关键字，google的搜索引擎会列出这个关键字对应的

列表选项，然后只要其中选一个便可以了。这种功能很方便，在

网页中很受欢迎。

今天我们就来讲一下如何利用JQuery附带的Autocomplete插件来制作类似

谷歌的效果。

首先,需要下载JQuery Autocomplete的js和css文件,可从JQuery官网下载.

jquery.autocomplete.js

jquery.autocomplete.css

至于列表数据,我们可以有几种方式,我们先来看最简单的一种,

使用网页端的js静态数组传入.

代码如下:

<%

@ Page Language

=

"

C#

"

 AutoEventWireup

=

"

true

"

 CodeBehind

=

"

JqueryAutocomplete1.aspx.cs

"

 Inherits

=

"

BlogNet.JQueryDemo.JqueryAutocomplete1

"

 

%>

<!

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

>

<

html 

xmlns

="http://www.w3.org/1999/xhtml"

 

>

<

head 

runat

="server"

>

    

<

title

>

JQuery Autocomplete - 静态数组数据

</

title

>

    

<

link 

rel

="stylesheet"

 type

="text/css"

 href

="../CSS/jquery.autocomplete.css"

 

/>

    

<

script 

type

="text/javascript"

 src

="../JsLib/jquery-1.3.2.min.js"

></

script

>

    

<

script 

type

="text/javascript"

 src

="../JsLib/jquery.autocomplete.js"

></

script

>

    

<

script 

type

="text/javascript"

>

   

        

        

var

 websites 

=

 [   

            

"

Google

"

,

"

NetEase

"

, 

"

Sohu

"

, 

"

Sina

"

, 

"

Sogou

"

, 

"

Baidu

"

, 

"

Tencent

"

,    

            

"

Taobao

"

, 

"

Tom

"

, 

"

Yahoo

"

, 

"

JavaEye

"

, 

"

Csdn

"

, 

"

Alipay

"

  

                ]; 

        

        $().ready(

function

() {   

            $(

"

#website

"

).autocomplete(websites);      

        });   

</

script

>

</

head

>

<

body

>

    

<

form 

id

="form1"

 runat

="server"

>

    

<

div

>

    Web Site: 

<

input 

type

="text"

 id

="website"

 

/>

   

    

</

div

>

    

</

form

>

</

body

>

</

html

>

效果如下: