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. Android SQLite 加入自定义函数

    SQLite Database 自定义函数实现: //Here's how to create a function that finds the first character of a strin ...

  2. css（四）-- 盒子模型和定位

    盒子模型: 盒子模型就是把一个html边框比作成了一个盒子的边框,盒子模型要做用于操作数据与边框之间的距离或者 是边框与边框之间的距离. 盒子模型主要是用于操作内边距(padding)与外边距(mar ...

  3. MVC分页控件的使用

    1. 引用 using Webdiyer.WebControls.Mvc; 2. using Webdiyer.WebControls.Mvc; ) { )); } 3.数据来源 public cla ...

  4. Unity3D ——强大的跨平台3D游戏开发工具（三）

    第四章 为地形添加水源.水流以及水下的模糊效果 制作好了地形的各种效果,接下来我们给场景添加一些水效果,使场景更加丰富. 第一步:添加水面 由于我在上一次的地形创作中就已经在山峰之间制作了一块洼地,它 ...

  5. Visual Studio 2012 开发环境配置+控制台工具+桌面应用程序

    一.界面布局视图设置 1.窗口的布局.控制台窗口运行恢复到开发环境的设置方法 也可以保存好设好的个性化设置,导入设置: 2.视图|服务器资源管理器(sever explorer) 可以访问数据源.服务 ...

  6. bzoj1396

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1396 题目大意: 题解:后缀自动机,只出现一次,那么就是right值为1,那么对于一段1-- ...

  7. 【Xilinx-VDMA模块学习】-00-开始

    最近在做XILINX图像相关的逻辑,需要用到VDMA模块,最后算是把这个模块摸得比较透了. 先在这里记一下,之后有空了总结一下.包括VDMA在Vivado中的GUI配置和软件驱动的详细理解.

  8. php循环生成的表单如何获得其各项值案例

    思路:输入框和按钮是用for循环生成的,不但要获取输入框里的各项值,并且要获取点击按钮的值,要知道是那个按钮被点击了,这里以生成5个为例.如图: 这是提交页面,点击的是“小米”. 这是显示结果,测试显 ...

  9. 解剖 Elasticsearch 集群 - 之三

    解剖 Elasticsearch 集群 - 之三 本篇文章是一系列涵盖 Elasticsearch 底层架构和原型示例的其中一篇.在本篇文章中,我们会讨论 Elasticsearch 如何提供准实时搜 ...

  10. MySQL ibdata多路径扩容

    vi /etc/my.cnf innodb_data_home_dir = innodb_data_file_path= /data/mysql/ibdata1:10M:autoextend(为目前i ...