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. (简单) POJ 3468 A Simple Problem with Integers , 线段树+区间更新。

    Description You have N integers, A1, A2, ... , AN. You need to deal with two kinds of operations. On ...

  2. Keil STM32调试，使用ST-Link下载程序时提示“flash timeout.reset the target and try it again”

    参考: 很郁闷,买来没多久的 STM32F4-DISCOVERY 就挂了? STM32F103RB   Jlink调试的时候出现flash timeout.reset the target and t ...

  3. webstrom命令大全

    Ctrl + Space:Basic code completion (the name of any class, method or variable) 基本代码完成(任何类.函数或者变量名称), ...

  4. JS利用短路原理简写if语句

    看GoogleDoodle-Dance的源代码,学习到一个小知识——简写if语句. 几乎所有语言中||和&&都遵循“短路”原理,如&&中第一个表达式为假就不会去处理第二 ...

  5. 【转】C\C++代码优化的27个建议

    1. 记住阿姆达尔定律: funccost是函数func运行时间百分比,funcspeedup是你优化函数的运行的系数. 所以,如果你优化了函数TriangleIntersect执行40%的运行时间, ...

  6. uCOS-iii 中定义的一些常量

    uCOS-iii 中定义的一些常量 uCOS-iii 中有许多宏定义的量,这些量不需要全部记住是什么意思,因为在阅读代码的时候可以选中变量或宏定义然后右键查看定义,就可以知道它代表的什么意思.但是如果 ...

  7. IOS开发中如何给UIImageView添加点击事件

    1.先创建一个UIImageView控件: photeImageView = [[UIImageView alloc]init]; photeImageView.frame = CGRectMake( ...

  8. 快速搭建LNMP

    [centos 6.4 server]系统安装请参考:http://blog.zhuyin.org/748.html1.防火墙设置: iptables -F service iptables save ...

  9. IM 融云 之 列表中显示聊天用户名称

    现在发现,聊天列表中,用户名称没有显示出来.

  10. 动态创建Fastreport（delphi）

    动态创建Fastreport分以下几个步骤: 1.首先清空Fastreport,定义全局变量,并加载数据集    frReport.Clear;    frReport.DataSets.Add(fr ...