网络编程 
首页 > 网络编程 > 浏览文章

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

(编辑:jimmy 日期: 2024/11/19 浏览:3 次 )

本文实例为大家分享了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> 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

上一篇:javascript入门之数组[新手必看]
下一篇:javascript中Number的方法小结
一句话新闻
一文看懂荣耀MagicBook Pro 16
荣耀猎人回归!七大亮点看懂不只是轻薄本,更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。
众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap