jQuery UI plug-in implements Baidu teleprompter effect
jquery ui
The example in this article shares the jQuery automatic text prompt function for your reference. The specific content is as follows
It is necessary to dynamically add and delete input boxes in the project, and there must be text prompts in each box.
js part:
//自动完提示
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 );
};
}Copy after login
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>Copy after login
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
4 weeks ago
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
4 weeks ago
By 尊渡假赌尊渡假赌尊渡假赌
Assassin's Creed Shadows: Seashell Riddle Solution
2 weeks ago
By DDD
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
4 weeks ago
By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
1 months ago
By 尊渡假赌尊渡假赌尊渡假赌
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
CakePHP Tutorial
1378
52
1378
52

