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 Run loop使用实例

    http://blog.csdn.net/libaineu2004/article/details/45364737 一.Runloop简介: Run loops 是线程相关的的基础框架的一部分.一个 ...

  2. thinkphp所有参数配置

    /* 项目设定 */ 'APP_DEBUG' => false, // 是否开启调试模式 'APP_DOMAIN_DEPLOY' => false, // 是否使用独立域名部署项目 'AP ...

  3. iOS UIActivityIndicatorView 的使用

    UIActivityIndicatorView 非常简单 ,就是一个转圈圈的控件:http://blog.csdn.net/zhaopenghhhhhh/article/details/1209265 ...

  4. Java编程思想非主流知识点

    1. Java中的多态性理解(注意与C++区分) Java中除了static方法和final方法(private方法本质上属于final方法,因为不能被子类访问)之外,其它所有的方法都是动态绑定,这意 ...

  5. Bzoj1479: [Nerrc1997]Puncher打孔机

    1479: [Nerrc1997]Puncher打孔机 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 22  Solved: 14[Submit][Sta ...

  6. C++ CRTP singleton

    C++ CRTP 是个很有意思的东西,因为解释原理的文章很多,但是讲怎么用的就不是很多了. 今天就稍微写下CRTP(奇异递归模板模式)的一个有趣的用法:Singleton(单例模式) 单例有很多中写法 ...

  7. python unicode 转中文 遇到的问题 爬去网页中遇到编码的问题

    How do convert unicode escape sequences to unicode characters in a python string 爬去网页中遇到编码的问题 Python ...

  8. bzoj3571————2016——3——12（最小乘积匹配）

    bzoj3571 传送门http://www.lydsy.com/JudgeOnline/problem.php?id=3571 题解: ——————来自伟大的thy大神  http://blog.c ...

  9. jQuery初始化

    jQuery 初始化的理解 var jQuery = function( selector, context ) { // The jQuery object is actually just the ...

  10. webstrom使用手册

    http://blog.csdn.net/kongjiea/article/details/48262851 http://www.jb51.net/article/58310.htm http:// ...