您的位置:

首页 >

腾博会官网9888 >

jQuery UI插件实现百度提词器效果 >

jQuery UI插件实现百度提词器效果

2016-08-14 13:11:06

分类:腾博会官网9888

本文实例为大家分享了jQuery自动文字提示功能,供大家参考,具体内容如下需要在项目中实现动态添加,删除输入框,每个框里面都要有文字提示。js部分://自动完提示 function tip(obj) { $( obj ).autocomplete({ minLength: 0, source: function (request, response) { //alert('dsada'); var title = $('#test1').val(); $.ajax({ url: "HotList.php?act=title", type: 'get', dataType: "json", data: request, success: function (dataObj) { // request对象只有一个term属性,对应用户输入的文本 // response是一个函数,在你自行处理并获取数据后,将JSON数据交给该函数处理,以便于autocomplete根据数据显示列表 // 自行处理并获取数据... //var dataObj = data; // 表示处理后的JSON数据 response(dataObj); // 最后将数据交给autocomplete去展示 }, error: function (XMLHttpRequest, textStatus, errorThrown) { //alert('获取信息失败'); //alert(XMLHttpRequest.status); //alert(XMLHttpRequest.readyState); //alert(textStatus); } }); }, focus: function( event, ui ) { $( obj ).val( ui.item.title ); return false; }, select: function( event, ui ) { //$( "#project" ).val( ui.item.title ); //$( "#project-id" ).val( ui.item.id ); $(obj).val( ui.item.title ); $(obj).prev().val( ui.item.id ); return false; } }) .data( "ui-autocomplete" )._renderItem = function( ul, item ) { return $( "<li>" ) .append( "<a>" + item.id + "<br>" + item.title + "</a>" ) .appendTo( ul ); }; } html:<div class="control-group"> <label class="control-label">*相关推荐</label> <div class="controls"> <?php foreach($listOne['recommend_title'] as $k => $v) { ?> <div> <input type="hidden" name="tuijian_id[]" value="<?php echo $listOne['title_id'][$k]; ?>" /> <input type="text" name="tuijian[]" class="show_goods" onkeyup="tip(this)" value="<?php echo $v;?>"/> <span class="btn" onclick="del(this);">删除</span> </div> <? } ?> <p id="project-description"></p> <span class="btn" id="add" onclick="add(this);">添加</span> <script> //添加推荐节点 function add(obj) { var str = "<div><input type='hidden' name='tuijian_id[]' /><input type='text' class='show_goods' name='tuijian[]' onkeyup='tip(this)'/> <span class='btn' onclick='del(this);'>删除</span></div>"; $(obj).before(str); } //删除当前推荐节点 function del(obj) { if($(".show_goods").length <= 3 ) { alert('最少需要三个推荐标题'); return false; } else { $(obj).parent().remove(); $(obj).prev().prev().remove(); $(obj).prev().remove(); $(obj).remove(); } } </script> </div> </div> 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本文实例讲述了JS for...in 遍历语句用法。分享给大家供大家参考,具体如下:for...in 语句用于对数组或者对象的属性进行循环操作。for (变量 in 对象){    在此执行代码}这里的“变量”用来指定变量,指定的变量可以是数组元素,也可以是对象的属性。举个例子:<!DOCTYPE html><meta charset="UTF-8"><script>var x;var zoon = new Array();zoon[0] = "猫猫";zoon[1] = "狗狗";zoon[2] = "猪猪";for (x in zoon){ console.log(zoon[x]);}var student={};student.name="张三";student["age"]=20;for(var i in student)//前面变量i就是对象的属性名{ console.log(i);//name age console.log(student[i]);//张三 20}</script>运行效果图如下:更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript遍历算法与技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》希望本文所述对大家JavaScript程序设计有所帮助。

本文实例讲述了jQuery实现的placeholder效果。分享给大家供大家参考,具体如下:运行效果截图如下:具体代码如下:<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery实现placeholder效果</title> <script src="jquery-1.7.2.min.js"></script> <script> $(function () { initEvent(); }); //初始化提示内容的颜色 function initEvent() { $('input.holder').each(function () { var $this = $(this), holder = $this.data('holder'); if (holder) { $this.css('color', '#a9a9a9').val(holder); } }); //获取焦点时设置内容的颜色和值为空 $(document).off('focus', 'input.holder').on('focus', 'input.holder', function () { var $this = $(this); if ($this.val() === $this.data('holder')) { $this.css('color', 'black').val(''); } }); //失去焦点后还原提示内容 $(document).off('focusout', 'input.holder').on('focusout', 'input.holder', function () { var $this = $(this); if ($.trim($this.val()) === '') { $this.css('color', '#a9a9a9').val($this.data('holder')); } }); } </script></head><body> <input type="text" class="holder" name="name" value="" data-holder="请输入账户" /><br><br> <input type="text" class="holder" name="name" value="" data-holder="请输入密码" /></body></html>更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常见经典特效汇总》、《jQuery常用插件及用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery form操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jquery中Ajax用法总结》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》希望本文所述对大家jQuery程序设计有所帮助。

项目开发遇到个问题,就是引入bootstrap下拉多选框进行多选的时候,用form表单提交到后台,获取不到多选的值,只能获取的选择的第一个值。纠结了会。jsp页面需要引入这东东~<link rel="stylesheet" href="${ctx}/js/selectbootstrap/dist/css/bootstrap-select.min.css" rel="external nofollow" ><script src="${ctx}/js/selectbootstrap/dist/js/bootstrap-select.min.js"></script>直接上代码~<head><script type="text/JavaScript"> function fun(){var str=[];var obj = document.getElementById("approverq");for(var i=0;i<obj.options.length;i++){if(obj.options[i].selected){str.push(obj.options[i].value);// 收集选中项}}$("#approver").val(str);}</script></head><body><div class="l_err" style="width: 100%; margin-top: 2px;"></div><form id="form" name="form" class="form-horizontal" method="post"action="${ctx}/leave/editEntity.shtml"><input type="hidden" class="form-control checkacc" value="${leave.id}" name="LeaveFormMap.id" id="id"><section class="panel panel-default"><div class="panel-body"><div class="form-group"><label class="col-sm-3 control-label">审批人</label><div class="col-sm-9"><input type="hidden" class="form-control" placeholder="请输入事由" name="LeaveFormMap.approver" id="approver"value="${leave.approver}"><select name="" id="approverq" class="form-control selectpicker" multiple="true"><option value="${leave.approver}" >${leave.approver}</option><c:forEach items="${list}" var="list"><option value="${list.userName}" >${list.userName}</option></c:forEach></select></div></div><div class="form-group"><label class="col-sm-3 control-label">意见</label><div class="col-sm-9"><textarea name="LeaveFormMap.idea" id="idea" class="form-control"style="width:600px;height:100px;" readonly="readonly">${leave.idea}</textarea> </div></div></div><footer class="panel-footer text-right bg-light lter"><button type="submit" class="btn btn-success btn-s-xs" onclick="fun()">提交</button></footer> </section></form></body>这样就好了。。以上所述是小编给大家介绍的bootstrap 下拉多选框进行多选传值问题代码分析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

基本样式<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div></div>自带进度<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 60% </div></div><div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;"> 0% </div></div><div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;"> 2% </div></div>多种颜色<div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="sr-only">40% Complete (success)</span> </div></div><div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <span class="sr-only">20% Complete</span> </div></div><div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <span class="sr-only">60% Complete (warning)</span> </div></div><div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> <span class="sr-only">80% Complete (danger)</span> </div></div>条纹<div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="sr-only">40% Complete (success)</span> </div></div><div class="progress"> <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <span class="sr-only">20% Complete</span> </div></div><div class="progress"> <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <span class="sr-only">60% Complete (warning)</span> </div></div><div class="progress"> <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> <span class="sr-only">80% Complete (danger)</span> </div></div>动态<div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"> <span class="sr-only">45% Complete</span> </div></div>堆叠<div class="progress"> <div class="progress-bar progress-bar-success" style="width: 35%"> <span class="sr-only">35% Complete (success)</span> </div> <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%"> <span class="sr-only">20% Complete (warning)</span> </div> <div class="progress-bar progress-bar-danger" style="width: 10%"> <span class="sr-only">10% Complete (danger)</span> </div></div>以上所述是小编给大家介绍的Bootstrap 3 进度条的实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

焦点访谈

最新最热的文章

更多 >

COPYRIGHT (©) 2017 Copyright ©2017 腾博会官网 网站地图

联系我们

827570882

扫描二维码分享到微信