AutoComplete控件就是指用户在文本框输入前几个字母或是汉字的时候，该控件就能从存放数据的文本或是数据库里将所有以这些字母开头的数据提示给用户，供用户选择，提供方便。

例子：

 <!doctype html>

 <html lang="en">

 <head>

   <meta charset="utf-8">

   <title>jQuery UI Autocomplete - Custom data and display</title>

   <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">

   <script src="//code.jquery.com/jquery-1.10.2.js"></script>

   <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

   <link rel="stylesheet" href="/resources/demos/style.css">

   <style>

   #project-label {

     display: block;

     font-weight: bold;

     margin-bottom: 1em;

   }

   #project-icon {

     float: left;

     height: 32px;

     width: 32px;

   }

   #project-description {

     margin: 0;

     padding: 0;

   }

   </style>

   <script>

   $(function() {

     var projects = [

       {

         value: "jquery",

         label: "jQuery",

         desc: "the write less, do more, JavaScript library",

         icon: "jquery_32x32.png"

       },

       {

         value: "jquery-ui",

         label: "jQuery UI",

         desc: "the official user interface library for jQuery",

         icon: "jqueryui_32x32.png"

       },

       {

         value: "sizzlejs",

         label: "Sizzle JS",

         desc: "a pure-JavaScript CSS selector engine",

         icon: "sizzlejs_32x32.png"

       }

     ];

     $( "#project" ).autocomplete({

       minLength: 0,

       source: projects,

       focus: function( event, ui ) {

         $( "#project" ).val( ui.item.label );

         return false;

       },

       select: function( event, ui ) {

         $( "#project" ).val( ui.item.label );

         $( "#project-id" ).val( ui.item.value );

         $( "#project-description" ).html( ui.item.desc );

         $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

         return false;

       }

     })

     .autocomplete( "instance" )._renderItem = function( ul, item ) {

       return $( "<li>" )

         .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )

         .appendTo( ul );

     };

   });

   </script>

 </head>

 <body>

 <div id="project-label">Select a project (type "j" for a start):</div>

 <img id="project-icon" src="data:images/transparent_1x1.png" class="ui-state-default" alt="">

 <input id="project">

 <input type="hidden" id="project-id">

 <p id="project-description"></p>

 </body>

 </html>

Jquery AutoComplete实现搜索自动完成的更多相关文章

  1. jQuery.Autocomplete实现自动完成功能-搜索提示功能

    $(function(){ var availableTags=["ads","abc","acc"]; $("#tags&quo ...

  2. 搜索自动提示的简单模拟JQuery

    使用jQuery实现类似于百度搜索时的自动完成功能,界面效果 所示. 首先在输入框上注册keyup事件,然后在事件中通过AJAX获取JSON对象.取得数据后,每一项数据创建一个li标签,在标签上注册c ...

  3. 5.电影搜索之 自动填充，也叫autocomplete、搜索建议！

    什么叫自动填充,用过百度的应该都知道!当你输入关键词之后,会有一个下拉的候选列表,都是与你输入的内容相关的,这个就是自动填充的搜索建议.一般的搜索引擎或者站内搜索都会有这个功能. 今天分享下这个功能的 ...

  4. jQuery AutoComplete 自动补全

    jQuery.AutoComplete是一个基于jQuery的自动补全插件.借助于jQuery优秀的跨浏览器特性,可以兼容Chrome/IE/Firefox/Opera/Safari等多种浏览器. 特 ...

  5. 使用jQuery Autocomplete(自动完成)插件

    jQuery 的Autocomplete(自动完成.自动填充)插件有不少,但比较下来我感觉,还是bassistance.de 的比较强大,我们就来写一些代码感受一下. 最简单的Autocomplete ...

  6. jquery autocomplete实现读取sql数据库自动补全TextBox

    转自我本良人 原文 jquery autocomplete实现读取sql数据库自动补全TextBox 项目需要这样子一个功能,其他部门提的意见,只好去实现了哦,搞了好久才弄出来,分享一下. 1.前台页 ...

  7. JQuery 插件之Ajax Autocomplete（ajax自动完成）搜索引擎自动显示下拉框

    平时用百度,谷歌搜索的时候 会有一个下 拉列表进行提示 这是一个非常好的功能 本文要介绍的这个JQuery 插件 名叫Ajax Autocomplete 顾名思义 ajax 也就是用ajax的方式获取 ...

  8. Bootstrap Typeahead/Jquery autocomplete自动补全

    使用Bootstrap Typeahead 组件: Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,自动填充. 效果如图所示: 实现方式: 1.引入 ...

  9. [转]jQuery.Autocomplete实现自动完成功能（详解）

    本篇文章除了介绍jquery.autocomplete基本参数外,主要说明jquery.autocomplete的数据源的格式问题.     1.jquery.autocomplete参考地址 htt ...

随机推荐

  1. ios UIKit动力

    UIkit动力学是UIkit框架中模拟真实世界的一些特性. UIDynamicAnimator 主要有UIDynamicAnimator类,通过这个类中的不同行为来实现一些动态特性. 它一般有两种初始 ...

  2. 1）Java学习笔记：接口和抽象类的异同

    Java接口和抽象类很像,他们有哪些相同点和异同点呢,下面我们做一个小结 相同 ① 都不能被实例化,都位于继承树的顶端,用于被实现或者继承 ② 都可以包含抽象方法,实现接口或者继承抽象类的普通子类都必 ...

  3. List<KeyValuePair<TKey,TValue>> 与 Dictionary<TKey,TValue> 不同

    两者都可以通过 KeyValuePair<TKey,TValue> 进行遍历,并且两者可以相互转换: List<KeyValuePair<string,string>&g ...

  4. 设置git账号并生成新的ssh（切换电脑用户之后）

    1.设置账号 2.设置邮箱 3.检查确认 4. 5.check-----成功~

  5. java 解析excel

    2014年2月25日 14:24:48 解析excel方法 //首先是jar包下载,请自行百度 //代码 package cn.wuwenfu.excel; import java.io.File; ...

  6. 单例--iOS

    GCD单例: static ModulesManager * sharedManager = nil; + (id)sharedInstance { static dispatch_once_t on ...

  7. Nginx 限流

    原文链接:http://colobu.com/2015/10/26/nginx-limit-modules/?utm_source=tuicool&utm_medium=referral 电商 ...

  8. 插入排序法-java案例详解

    /** * 功能:插入排序法 * 基本思想:把n个待排序的元素看成一个有序和无序表,开始时有序表中只包含一个元素, * 无序表中包含有n-1个元素,排序过程中每次从无序表中取出第一个元素,把它的排序码 ...

  9. 获取打开文件的PID

    var SI : TStartupInfo; PI : TProcessInformation; pid:DWORD; begin ZeroMemory(@SI, SizeOf(SI)); //Zer ...

  10. PHP cookie禁用时session 方案

    在PHP中使用过SESSION的朋友可能会碰到这么一个问题,SESSION变量不能跨页传递.这令我苦恼了好些日子,最终通过查资料思考并解决了这个问题.我认为,出现这个问题的原因有以下几点: 1.客户端 ...