jQuery UI plug-in implements Baidu teleprompter effect

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 );
    };
  }

html:

<div class="control-group">
 <label class="control-label">*相关推荐</label>
   <div class="controls">
     <?php foreach($listOne[&#39;recommend_title&#39;] as $k => $v) { ?>
   <div>
    <input type="hidden" name="tuijian_id[]" value="<?php echo $listOne[&#39;title_id&#39;][$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=&#39;hidden&#39; name=&#39;tuijian_id[]&#39; /><input type=&#39;text&#39; class=&#39;show_goods&#39; name=&#39;tuijian[]&#39; onkeyup=&#39;tip(this)&#39;/> <span class=&#39;btn&#39; onclick=&#39;del(this);&#39;>删除</span></div>";
             $(obj).before(str);
         }
        //删除当前推荐节点
         function del(obj) {
         if($(".show_goods").length <= 3 ) {
         alert(&#39;最少需要三个推荐标题&#39;);
         return false;
         } else {
         $(obj).parent().remove();
         $(obj).prev().prev().remove();
         $(obj).prev().remove();
         $(obj).remove();
          }
  
       }
  
   </script>
 </div>
</div>