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. MySQL 同步状态

    Exec_Master_Log_Pos: The position of the last event executed by the SQL thread from the master's bin ...

  2. FFT算法的完整DSP实现（转）

    源:FFT算法的完整DSP实现 傅里叶变换或者FFT的理论参考: [1] http://www.dspguide.com/ch12/2.htm The Scientist and Engineer's ...

  3. linux命令学习-4-lsof

    lsof(list open files)是一个列出当前系统打开文件的工具.在linux环境下,任何事物都以文件的形式存在,通过文件不仅仅可以访问常规数据,还可以访问网络连接和硬件. 在终端下输入ls ...

  4. WebService 使用wsdl.exe生成代理类

    利用wsdl.exe生成webservice代理类: 根据提供的wsdl生成webservice代理类 1.开始->程序->Visual Studio 2005 命令提示 2.输入如下红色 ...

  5. AFNetworing进行POST上传 分类： ios技术 2015-04-01 17:03 73人阅读 评论(0) 收藏

    AFHTTPRequestOperationManager *manager = [AFHTTPRequestOperationManager manager]; //申明返回的结果是json类型 m ...

  6. C#常用网址

    C# 编程指南 https://msdn.microsoft.com/zh-cn/library/67ef8sbd.aspx

  7. php短数组写法

    在php 5.4+的版本中,可以使用  []  来表示  array() 例子: // On PHP 5.1 $data = array("foo", "bar" ...

  8. YII 1.0 验证码

    public function actions(){ return array ( ‘captcha’=> array( ‘class’=> ‘CCatpchaAction’, ‘heig ...

  9. iOS 之 Aggregate Target

    工程导航栏>选中工程>菜单File>New>Target>Other>Aggregate

  10. JavaScript成员属性读取

    var obj = {}; 检索一个不存在的成员属性的值,将返回undefined; 可以使用||运算符来填充默认值: var status = obj.status||'inistatus' 从un ...