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)
1 months ago
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
1 months ago
By 尊渡假赌尊渡假赌尊渡假赌
Assassin's Creed Shadows: Seashell Riddle Solution
3 weeks ago
By DDD
What's New in Windows 11 KB5054979 & How to Fix Update Issues
2 weeks ago
By DDD
Will R.E.P.O. Have Crossplay?
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
1382
52

