使用 JQuery Autocomplete插件(一)

最新推荐文章于 2022-09-12 16:07:22 发布

weixin_34185364

最新推荐文章于 2022-09-12 16:07:22 发布

阅读量142

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/newstar0101/archive/2010/04/09/1707972.html

本文介绍如何使用JQuery的Autocomplete插件实现类似谷歌搜索的自动补全效果。通过下载必要的js和css文件，并使用静态数组作为数据源，快速搭建一个简单的Autocomplete示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用JQuery Autocomplete插件(一)

什么是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 >

效果如下: