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写的一个自定义弹出式对话框代码
Jan 17 Javascript
jquery选择器需要注意的问题
Nov 26 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
Dec 20 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
JavaScript实现大图轮播效果
Jan 11 Javascript
javascript中的隐式调用
Feb 10 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
Jul 09 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 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实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
PHP jQuery表单,带验证具体实现方法
2014/02/15 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
在浏览器窗口上添加遮罩层的方法
2012/11/12 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
JS动态计算移动端rem的解决方案
2016/10/14 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
vue实现图片预览组件封装与使用
2019/07/13 Javascript
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
深入理解Python中的*重复运算符
2017/10/28 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
python适合人工智能的理由和优势
2019/06/28 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
Django-migrate报错问题解决方案
2020/04/21 Python
Python中logger日志模块详解
2020/08/04 Python
雅诗兰黛美国官网:Estee Lauder美国
2016/07/21 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
最新自我评价范文
2013/11/16 职场文书
搬家公司的创业计划书
2014/01/01 职场文书
给客户的道歉信
2014/01/13 职场文书
给全校老师的建议书
2014/03/13 职场文书
庆六一宣传标语
2014/10/08 职场文书
党委工作总结2015
2015/04/27 职场文书
投资合作意向书范本
2015/05/08 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP
在Django中使用MQTT的方法
2021/05/10 Python
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python
分析并发编程之LongAdder原理
2021/06/29 Java/Android