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 相关文章推荐
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
Extjs学习笔记之四 工具栏和菜单
Jan 07 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
Dec 15 Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
原生js封装的ajax方法示例
Aug 02 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 Javascript
vue-socket.io跨域问题有效解决方法
Feb 11 Javascript
实例讲解React 组件生命周期
Jul 08 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实现多服务器共享SESSION数据的方法
2007/03/16 PHP
利用PHP制作简单的内容采集器的代码
2007/11/28 PHP
php面向对象的方法重载两种版本比较
2008/09/08 PHP
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
php实现JWT验证的实例教程
2020/11/26 PHP
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
Python实现完整的事务操作示例
2017/06/20 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
对pycharm 修改程序运行所需内存详解
2018/12/03 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
Python爬虫爬取新闻资讯案例详解
2020/07/14 Python
python3中celery异步框架简单使用+守护进程方式启动
2021/01/20 Python
数据库的约束含义
2012/09/09 面试题
WSDL的操作类型主要有几种
2013/07/19 面试题
高级护理专业毕业生推荐信
2013/12/25 职场文书
十月份红领巾广播稿
2014/01/22 职场文书
植树节口号
2014/06/21 职场文书
个人借条范本
2015/05/25 职场文书
班主任工作总结范文
2015/08/13 职场文书