使用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>

效果如下:

时间: 2024-07-30 15:24:56

使用JQuery Autocomplete插件(一)的相关文章

jquery autocomplete插件实例google baidu相关内容

<!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> <meta http-equiv="content-

jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解_jquery

本文实例讲述了jQuery autoComplete插件两种使用方式及动态改变参数值的方法.分享给大家供大家参考,具体如下: 一.一次加载.多次使用: 前端JS代码: /*客户名称自动匹配*/ function customerAutoComplete(){ $.ajax({ type:"GET", url:encodeURI("/approvalajax/salesOrderApproval_findCustomerList"), dataType:"j

PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能

我们在很多项目中使用了搜索功能来帮助用户更快更准确的找到想要的信息.本文将介绍如何实现用户输入自动提示的功能,就像谷歌百度搜索引擎一样,当用户输入关键字时,输入框下方会有提示,将与关键字相关的信息展现出来供用户选择,提升了用户体验. 本文将使用jquery ui的autocomplete插件,结合后端PHP,数据源通过PHP读取mysql数据表的数据. XHTML 首先将jquery库和相关ui插件,以及css导入.   代码如下: <link rel="stylesheet"

PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能_php实例

我们在很多项目中使用了搜索功能来帮助用户更快更准确的找到想要的信息.本文将介绍如何实现用户输入自动提示的功能,就像谷歌百度搜索引擎一样,当用户输入关键字时,输入框下方会有提示,将与关键字相关的信息展现出来供用户选择,提升了用户体验. 本文将使用jquery ui的autocomplete插件,结合后端PHP,数据源通过PHP读取mysql数据表的数据. XHTML 首先将jquery库和相关ui插件,以及css导入. 复制代码 代码如下: <link rel="stylesheet&quo

修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交_jquery

但唯一遗憾的是,在对中文输入法打开时,firefox3.0中是对中文拼音的自动匹配,而对输入后的中文无法及时触发匹配:而在我的IE6.0下,则无此问题. 原因分析: Autocomplete插件对用户输入字符的触发自动匹配是通过"keydown"事件进行的(可分析jquery.autocomplete.js第 92行),在IE6中,当输入法打开时,输入的字符是不会触发"keydown"的,只有中文输入完毕才触发之,所以中文输入和latin文没有区别的:但在firef

jQuery autocomplete插件修改_jquery

主要修改了两个地方: 一.上下选择与输入值同步问题. 输入关键字后,当出现了下拉选项,用键盘的上下键选择时,关键字输入框的值,没有与你选择的值同步.插件是老外写的,可能他没有考虑到这一点. 二.修正了在firefox下中文输入,没有激活自动提交的问题. 老外当然不会用到中文输入,这个bug存在也理所当然了. 另:附件里的实现了选择后自动提交,也就和google.百度的效果完全一样了. 下载地址

jQuery 标签插件 Tags Input Plugin 使用实例教程

一这个插件是jquery开发的标签功能加强,生成或删除标签非常好用,还能对输入重复标签进行检查,配合JQuery autocomplete插件实现自动完成功能.官网:http://xoxco.com/projects/code/tagsinput/ 使用方法如下  引入 <link href="../../resources/css/jquery.tagsinput.css" rel="stylesheet" type="text/css"

解决JQuery AutoComplete在IE9下出错的问题

JQuery AutoComplete插件在IE9下会因为bgiframe的问题出错 解决方法: 引入新的bgiframe   jquery.bgiframe-2.1.2.js:   /*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net) * Licensed under the MIT License (LICENSE.txt). * * Version 2.1.2 */ (function($){ $.fn.bgifram

小试JQuery的AutoComplete插件_jquery

前台代码如下: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w