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


Posted in Javascript onNovember 21, 2016

本文实例为大家分享了jQuery自动文字提示功能,供大家参考,具体内容如下

需要在项目中实现动态添加,删除输入框,每个框里面都要有文字提示。
js部分:

//自动完提示 
  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['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>

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

Javascript 相关文章推荐
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 Javascript
jquery修改属性值实例代码(设置属性值)
Jan 06 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
Nov 11 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 Javascript
解析利用javascript如何判断一个数为素数
Dec 08 Javascript
JavaScript常用正则函数用法示例
Jan 23 Javascript
vue滚动轴插件better-scroll使用详解
Oct 17 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 Javascript
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 Javascript
javascript中Number的方法小结
Nov 21 #Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
Nov 21 #Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 #Javascript
详解js中call与apply关键字的作用
Nov 21 #Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 #Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 #Javascript
全面解析node 表单的图片上传
Nov 21 #Javascript
You might like
PHP 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
php使用codebase生成随机数
2014/03/25 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
一段批量给页面上的控件赋值js
2010/06/19 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
jquery ajax跨域解决方法(json方式)
2014/02/04 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
百度地图给map添加右键菜单(判断是否为marker)
2016/03/04 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
VUE中的无限循环代码解析
2017/09/22 Javascript
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
Python实现的二维码生成小软件
2014/07/11 Python
Python中input和raw_input的一点区别
2014/10/21 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
Django异步任务线程池实现原理
2019/12/17 Python
英国电气世界:Electrical World
2019/09/08 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
电气工程及其自动化学生实习自我鉴定
2013/09/19 职场文书
档案接收函
2014/01/13 职场文书
学生宿舍管理制度
2014/01/30 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
出纳试用期自我评价
2015/03/10 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书