使用JQuery Autocomplete插件(一)

Bertha 。 2021-12-24 12:41 393阅读 0赞

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

效果如下:  
  
![static_autocomplete1.png][]

转载于:https://www.cnblogs.com/davidgu/archive/2009/08/19/1549696.html

[static_autocomplete1.png]: /images/20211223/a2aaca2ad8984885bae6d804d486df23.png