本文实例为大家分享了jQuery自动文字提示功能,供大家参考,具体内容如下
需要在项目中实现动态添加,删除输入框,每个框里面都要有文字提示。
js部分:
//自动完提示
function tip(obj) {
$( obj ).autocomplete({
minLength: 0,
source: function (request, response) {
//alert('dsada');
var title = $('#test1').val();
$.ajax({
url: "HotList.php",
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">
<"hidden" name="tuijian_id[]" value="<" />
<input type="text" name="tuijian[]" class="show_goods" onkeyup="tip(this)" value="<"/> <span class="btn" onclick="del(this);">删除</span>
</div>
<"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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“jQuery UI插件实现百度提词器效果”评论...
更新日志
2025年10月27日
2025年10月27日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]