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 07 Javascript
javascript中直接写php代码的方法
Jul 31 Javascript
js倒计时小程序
Nov 05 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
TypeScript 学习笔记之基本类型
Jun 19 Javascript
JS原型对象的创建方法详解
Jun 16 Javascript
Angular 页面跳转时传参问题
Aug 01 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 Javascript
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
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 引用(&amp;)详解
2009/11/20 PHP
php操作excel文件 基于phpexcel
2010/07/02 PHP
9个PHP开发常用功能函数小结
2011/07/15 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
YII分模块加载路由的实现方法
2018/10/01 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
js 倒计时(高效率服务器时间同步)
2017/09/12 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
wxPython实现窗口用图片做背景
2018/04/25 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
Python Unittest根据不同测试环境跳过用例的方法
2018/12/16 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
PyQt5实现简易计算器
2020/05/30 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
Java的五个基础面试题
2016/02/26 面试题
后勤人员自我评价怎么写
2013/09/19 职场文书
2016年教师节感言
2015/12/09 职场文书
关于MySQL中explain工具的使用
2023/05/08 MySQL