1.引入相应的js和css,我用到的时候是在jquery-ui的js里面整合的,ui的css

2.先在html上写一个input

<input id="tags" class="form-control ui-autocomplete-input" autocomplete="off" type="text">
                                                <input id="tagsid"  type="text">

3.css上设置一下高主要是防止ie

.ui-autocomplete {
max-height: 424px;
overflow-y: auto;
/* 防止水平滚动条 */
overflow-x: hidden;
}
/* IE 6 不支持 max-height
* 我们使用 height 代替,但是这会强制菜单总是显示为那个高度
*/
* html .ui-autocomplete {
height: 424px;
}

4.js

//autocomplete
                var projects = [
                {
                    value: "218",
                    label: "jQuery",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                }
            ];
                $( "#tags" ).autocomplete({
                    minLength: 0,
                    source: projects,
                    focus: function( event, ui ) {
               //alert(ui.item.label);//选择到哪一个.
                return false;
              },
              select: function( event, ui ) {
                  //真正的选择.
                  //alert(ui.item.label);
                  $("#tagsid").val(ui.item.value);
                  //alert(ui.item.desc);
                  //alert(ui.item.icon);
                return false;
              }
                })
                $("#tags").data("ui-autocomplete")._renderItem = function (ul, item) {
                    return $( "<li>" ).append( "<a><table width='400px'><tr><td align='left'>" + item.label + "</td><td align='right'><font style='color: #009933; font-family: 黑体; font-style: italic'>约" + item.desc + "个宝贝</font>&nbsp;&nbsp;</td></tr></table></a>" ).appendTo( ul );
                }

(jQuery插件)autocomplete插件的简单例子的更多相关文章

  1. jquery ajax请求后台 的简单例子

    jQuery.ajax(url,[settings]) 概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax ...

  2. jQuery的Autocomplete插件的远程url取json数据的问题

    关于远程返回的json数据的展示,以前一样的代码,如果是本地写好的json串数据,插件显示就没有问题,一旦换成ulr方式读取一样的数据,插件就不能正常显示问题了. 今天偶然搜索资料找到一篇csdn上有 ...

  3. Jquery autocomplete插件的使用

    简单用法: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...

  4. GBin1插件推荐之马可波罗(Marco Polo),jQuery的自动补齐插件 - Autocomplete Plugin

    让我们Google一下"jQuery autocomplete plugin"(jquery自动补齐插件).在过去的4年中,我已经Google了很多次这个组合了.然而结果并没有变化 ...

  5. jquery 自动完成 Autocomplete插件汇总

    1. jQuery Autocomplete Mod jQuery Autcomplete插件.能够限制下拉菜单显示的结果数. 主页:http://www.pengoworks.com/worksho ...

  6. Cropper – 简单的 jQuery 图片裁剪插件

    Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...

  7. jquery autocomplete插件

    jquery autocomplete插件 https://goodies.pixabay.com/jquery/auto-complete/demo.html autocomplete-table ...

  8. ZOOM - 简单易用的 jQuery 照片相册插件

    jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的图片切换效果.ZOOM 是一款全屏效果的 jQuery 图片切换展示插件,支持键盘前后按键切换,支持 ...

  9. jQuery 插件autocomplete

    jQuery 插件autocomplete 自动加载 参考: http://www.cnblogs.com/Peter-Zhang/archive/2011/10/22/2221147.html ht ...

随机推荐

  1. 微信小程序开发-第一弹

    前言:       本篇文章为大家详细介绍微信小程序开发第一篇,后续步骤会逐步更新,欢迎大家关注. 第一步  注册        1.1 打开网址 https://mp.weixin.qq.com/  ...

  2. Object.defineProperty方法

    Object.defineProperty() (一次添加/修改一个属性) 用法:Object.defineProperty(obj, prop, descriptor) 方法会直接在一个对象上定义一 ...

  3. JVM的类加载

    一.基本类加载机制介绍 大体引用一下<深入理解Java虚拟机>一书中对类加载的定义:虚拟机将描述类的二进制字节流(即Class文件)加载到内存中,并对其进行验证.准备.解析.初始化,最终 ...

  4. solr(五): centos中, 整合 tomcat&solr

    前言 虽然windows下, tomcat和solr整合起来灰常的方便, 但是, 一般像这种东西, 都很少部署在windows中, 更多的是部署到linux中去. 其实, 步骤是一样的, 这里, 我在 ...

  5. 进程间通信IPC-消息队列

    前言: 消息队列就是一个消息的链表.可以把消息看作一个记录,具有特定的格式以及特定的优先级.对消息队列有写权限的进程可以向其中按照一定的规则添加新消息:对消息队列有读权限的进程则可以从消息队列中读走消 ...

  6. PHP中的__call和__callStatic方法

    如何防止调用不存在的方法而出错,使用__call魔术重载方法. __call方法原型如下: mixed __call(string $name,array $arguments) 当调用一个不可访问的 ...

  7. mysql滑动聚合

    滑动聚合是按顺序对滑动窗口范围内的数据进行聚合的操作.下累积聚合不同,滑动聚合并不是统计开始计算的位置到当前位置的数据. 这里以统计最近三个月中员工第月订单情况为例来介绍滑动聚合. 滑动聚合和累积聚合 ...

  8. 基于FineUIMVC的代码生成器(传统三层)v1.0

    三层我就不说了,主要是看框架思路可扩展.以前用FineUI开源版写过一版,修修改改自己用了,没有特意的整理,FineUIMVC开发还是比较快,移植了一下两天就弄完了,算是一个对新手有用的工具,先放出第 ...

  9. The 15th Zhejiang Provincial Collegiate Programming Contest(部分题解)

    ZOJ 4024 Peak 题意 给出n和n个数,判断该数列是否是凸形的. 解题思路 从前往后第一对逆序数,和从后往前第一队逆序数,如果都非零而且相邻,证明该数组是凸形的. 代码 #include & ...

  10. 《C#并发编程经典实例》学习笔记—异步编程关键字 Async和Await

    C# 5.0 推出async和await,最早是.NET Framework 4.5引入,可以在Visual Studio 2012使用.在此之前的异步编程实现难度较高,async使异步编程的实现变得 ...