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. 搞懂ES6的import export

    引言 说来惭愧,这两个关键字几乎天天在写,但是自己写的模块export出去的对象,import居然拿不到,也是没谁了

  2. 小问题填坑,关于obj.x和obj["x"]

    之前在看对象的api中for in函数时,有一个地方让我略有疑惑: var obj={ x:100, y:200, z:300 }; for(var key in obj){ if(obj.hasOw ...

  3. 敏感词汇过滤DFA算法

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Tex ...

  4. Perl的die和warn函数

    die和warn die可以在出现错误的时候停止程序,并给出消息.默认会输出出错的程序名称和出错行号 warn函数和die函数类似,但和die的区别是不会终止程序 die和warn的参数末尾如果给了\ ...

  5. WebSocket+Java 私聊、群聊实例

    前言 之前写毕业设计的时候就想加上聊天系统,当时已经用ajax长轮询实现了一个(还不懂什么是轮询机制的,猛戳这里:https://www.cnblogs.com/hoojo/p/longPolling ...

  6. shell编程基础(五): 正则表达式及其使用

    正则表达式 1.前情提要 以前我们用grep在一个文件中找出包含某些字符串的行,比如在头文件中找出一个宏定义.其实grep还可以找出符合某个模式(Pattern)的一类字符串.例如找出所有符合xxxx ...

  7. 业务开发(六)—— MyBatis框架

    0x01.元素内容必须由格式正确的字符数据或标记组成. Caused by: org.apache.ibatis.builder.BuilderException: Error creating do ...

  8. 《Office 365开发入门指南》上市说明和读者服务

    写在最开始的话 拙作<Office 365开发入门指南>上周开始已经正式在各大书店.在线商城上市,欢迎对Office 365的开发.生态感兴趣的开发者.项目经理.产品经理参考本书,全面了解 ...

  9. .NET MVC后台发送post请求

    一.WebRequest方式 //设置请求接口 var request = (HttpWebRequest)WebRequest.Create("http://xxx.com/xxx&quo ...

  10. 支持MySelf

    编程思路分享,BUG上报,主推Java Web方向与软件架构设计,不定期推出系列针对性基础教程,项目均放置于GitHub,个人运营精力有限,感谢支持. 交流群:628793702 个人技术公众,欢迎关 ...