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 相关文章推荐
js no-repeat写法 背景不重复
Mar 18 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
JavaScript获取当前网页标题(title)的方法
Apr 03 Javascript
Augularjs-起步详解
Jul 08 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
Es6 写的文件import 起来解决方案详解
Dec 13 Javascript
vue和webpack安装命令详解
Jun 15 Javascript
小程序图片长按识别功能的实现方法
Aug 30 Javascript
js中Generator函数的深入讲解
Apr 07 Javascript
微信小程序表单验证WxValidate的使用
Nov 27 Javascript
vue+element 实现商城主题开发的示例代码
Mar 26 Javascript
JavaScript实现两个数组的交集
Mar 25 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
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
php+mysql实现数据库随机重排实例
2014/10/17 PHP
php中header跳转使用include包含解决参数丢失问题
2015/05/08 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
javascript 支持链式调用的异步调用框架Async.Operation
2009/08/04 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
Christys’ Hats官网:英国帽子制造商
2018/11/28 全球购物
澳大利亚网上书店:QBD
2021/01/09 全球购物
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
大四学生毕业自荐信
2013/11/07 职场文书
项目经理任命书
2014/06/04 职场文书
2014年食堂工作总结
2014/11/20 职场文书
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android