(jQuery插件)autocomplete插件的简单例子
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> </td></tr></table></a>" ).appendTo( ul );
}
(jQuery插件)autocomplete插件的简单例子的更多相关文章
- jquery ajax请求后台 的简单例子
jQuery.ajax(url,[settings]) 概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax ...
- jQuery的Autocomplete插件的远程url取json数据的问题
关于远程返回的json数据的展示,以前一样的代码,如果是本地写好的json串数据,插件显示就没有问题,一旦换成ulr方式读取一样的数据,插件就不能正常显示问题了. 今天偶然搜索资料找到一篇csdn上有 ...
- Jquery autocomplete插件的使用
简单用法: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...
- GBin1插件推荐之马可波罗(Marco Polo),jQuery的自动补齐插件 - Autocomplete Plugin
让我们Google一下"jQuery autocomplete plugin"(jquery自动补齐插件).在过去的4年中,我已经Google了很多次这个组合了.然而结果并没有变化 ...
- jquery 自动完成 Autocomplete插件汇总
1. jQuery Autocomplete Mod jQuery Autcomplete插件.能够限制下拉菜单显示的结果数. 主页:http://www.pengoworks.com/worksho ...
- Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
- jquery autocomplete插件
jquery autocomplete插件 https://goodies.pixabay.com/jquery/auto-complete/demo.html autocomplete-table ...
- ZOOM - 简单易用的 jQuery 照片相册插件
jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的图片切换效果.ZOOM 是一款全屏效果的 jQuery 图片切换展示插件,支持键盘前后按键切换,支持 ...
- jQuery 插件autocomplete
jQuery 插件autocomplete 自动加载 参考: http://www.cnblogs.com/Peter-Zhang/archive/2011/10/22/2221147.html ht ...
随机推荐
- 微信小程序开发-第一弹
前言: 本篇文章为大家详细介绍微信小程序开发第一篇,后续步骤会逐步更新,欢迎大家关注. 第一步 注册 1.1 打开网址 https://mp.weixin.qq.com/ ...
- Object.defineProperty方法
Object.defineProperty() (一次添加/修改一个属性) 用法:Object.defineProperty(obj, prop, descriptor) 方法会直接在一个对象上定义一 ...
- JVM的类加载
一.基本类加载机制介绍 大体引用一下<深入理解Java虚拟机>一书中对类加载的定义:虚拟机将描述类的二进制字节流(即Class文件)加载到内存中,并对其进行验证.准备.解析.初始化,最终 ...
- solr(五): centos中, 整合 tomcat&solr
前言 虽然windows下, tomcat和solr整合起来灰常的方便, 但是, 一般像这种东西, 都很少部署在windows中, 更多的是部署到linux中去. 其实, 步骤是一样的, 这里, 我在 ...
- 进程间通信IPC-消息队列
前言: 消息队列就是一个消息的链表.可以把消息看作一个记录,具有特定的格式以及特定的优先级.对消息队列有写权限的进程可以向其中按照一定的规则添加新消息:对消息队列有读权限的进程则可以从消息队列中读走消 ...
- PHP中的__call和__callStatic方法
如何防止调用不存在的方法而出错,使用__call魔术重载方法. __call方法原型如下: mixed __call(string $name,array $arguments) 当调用一个不可访问的 ...
- mysql滑动聚合
滑动聚合是按顺序对滑动窗口范围内的数据进行聚合的操作.下累积聚合不同,滑动聚合并不是统计开始计算的位置到当前位置的数据. 这里以统计最近三个月中员工第月订单情况为例来介绍滑动聚合. 滑动聚合和累积聚合 ...
- 基于FineUIMVC的代码生成器(传统三层)v1.0
三层我就不说了,主要是看框架思路可扩展.以前用FineUI开源版写过一版,修修改改自己用了,没有特意的整理,FineUIMVC开发还是比较快,移植了一下两天就弄完了,算是一个对新手有用的工具,先放出第 ...
- The 15th Zhejiang Provincial Collegiate Programming Contest(部分题解)
ZOJ 4024 Peak 题意 给出n和n个数,判断该数列是否是凸形的. 解题思路 从前往后第一对逆序数,和从后往前第一队逆序数,如果都非零而且相邻,证明该数组是凸形的. 代码 #include & ...
- 《C#并发编程经典实例》学习笔记—异步编程关键字 Async和Await
C# 5.0 推出async和await,最早是.NET Framework 4.5引入,可以在Visual Studio 2012使用.在此之前的异步编程实现难度较高,async使异步编程的实现变得 ...